Question

I have built a nav where I have an unordered list made up of a group of smaller unordered lists. These elements have been given the class “subnav”.

When viewing the nav on a smaller screen the navigation “collapses” and the menu’s pile on top of each other. What I’d like is for the navigation to keep it’s “integrity” without changing shape when the screen changes.

Here’s a jsfiddle: http://jsfiddle.net/Cyc4n/

If you adjust the size of the window within jsfiddle you can see the menu dancing around – how do I keep it still and intact?

Any direction greatly appreciated

Answer 1

You could use display: table-cell; for .subnav and display: table; for their parent, .navigation (or better table-row for their parent and table for the parent of the latter, but it already works like that 😉 )
Here is a fiddle: http://jsfiddle.net/Cyc4n/1/

EDIT: in my example, I added table-layout: fixed and a large padding on right of logo. It’s there as examples if you want exact control on your items. Feel free to remove both if you want the browser to do its best at managing the width of items.

You could also use CSS3 Flexible Box Layout but its support is worse than CSS2 display: table;! Though it should be OK if you specifically target “mobile” (narrow screens) with Media Queries: browsers supporting Media Queries should also support Flexbox (that’s Responsive Design with desktop first, not mobile first).
EDIT2: support of display: table*; is IE8+. You already have the fallback for IE7- with inline-block 😉