Justified (Full Width) CSS Navigation Menu

[CodePen height=300 show=result href=qbzhJ user=philhoyt ]

Justified menus have been an issue for me. Designers have always given me mocks up which show menu items fluidly filling the width of the layout. If you have ever attempted to do this in practice you will know it is more difficult than it sounds, especially if the number of menu items change during dev. The above code attempts to solve this issue using flexbox which work really great with modern browsers and an IE 9 fallback using display:table which doesn’t work in Firefox because WHY on earth would you want to apply position:relative to and element with display:table-cell #sarcasm.

Also if you are using my Generic Framework for WordPress you can simply paste this into a child theme of it and it will overwrite the parent styling!

Newsletter Sign Up

Get the weirdest monthly newsletter you'll ever sign up for!

Leave a Reply