Streaming live at 10am (PST)

Positioning Question


#1

Hi,

For positioning, I have a question. I have my nav bar with txt links going across the top. As I manually collapse browser to see how they wrap, they eventually begin to stack on top of each other.

The default setting was position: auto. Would there be a better option I ought to opt for in this case?
What I am not liking is that the nav container bar overall (with the background color) does not extend its height when the text links wrap. This means, if I further collapse before hitting the navicon breakpoint, the text links spill outside of my nav bar. - Should I be concerned about this or as long as the big 3 breakpoints are handled (2 of those 3 using the navicon...this nothing to worry about?)

Thanks


#2

Hi @Tine22 it's difficult to guide you without a reference. Could you please update your post with some more information so we can help you faster? Things like your read-only link & screenshots really helps us to help you faster :slightly_smiling:

How to share a read-only link:
http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link
You may also find this tutorial on CSS Positioning properties very helpful :smiley:

http://webdesign.tutsplus.com/courses/the-complete-guide-to-css-positioning/lessons/overview-the-four-position-types


#3

I removed the set height from the background nav bar, and that helped quite a bit. Now it flexes with the nav links.
I was able to use padding to set a defined height instead.

Now, I just need to know how I can get nav text links from wrapping and stacking when browser window is collapsed.
How do I control them to 'cut out' at a certain screen size and instead present the navicon to avoid end-user seeing them wrap & stack.

Look at this example here: http://flycms-template.webflow.io/
Push your browser window inward and watch how these links nav links first slide over to the right somewhat and then instantly convert to the navicon without you ever seeing them wrap. Beautiful.

That is the slight modification I need at this point.


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.