nav bar wrapping on smaller resolutions
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-block
s 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.