nav bar wrapping on smaller resolutions

Question

I\'m trying my hand at HTML5/CSS3 as a learning process but I\'m struggling to create a navigation bar for links to other sections across my pages. I adapted the code from a tut

Answer 1

You almost did it correctly. The problem with your css is that white-space: nowrap; only works for inline elements - but you are using float. Floated elements become block-level even if you set display: inline; property to such an element (it will not be applied). So - if you replace your floats with display: inline-block; - your white-space property will work :)

A live example of inline-blocks and white-space can be seen here: http://jsfiddle.net/skip405/wzgcH/

As for your centering method - there is a better solution. (You may remove the padding and set the proper width) Especially if you are using inline-blocks. Simply set text-align: center; on their parent - and you'll have it centered.

Answer 2

Another good option here, if you don't want to go through and change the display property of every single element in your nav bar, is to simply specify the style of your navbar to have a min-width. This prevents wrapping when you decrease the screen size.

Answer 3

The problem is you are setting the nav width to be a mere 33.3% with the rest being padding. The small allowable space is then pushing all the elements underneath each other when resized past a certain point. To stop this from happening you can do two things, set the nav width to be 100% instead, and second, if you don't want it to resize at all then you have to give it a min-width of the sum of all the a elements' widths put together. You should also most likely give it a max-width as well unless you are using a responsive design. Here's a demo I put together with your modified css: http://jsfiddle.net/c3HE6/