Q:

How to make menu fixed, in fluid website?

http://www.eco1furniture.ca/
When resizing the page down the main-menu goes to a 2nd line. I know this is supposed to happen with the site being fluid. But is there a way of keeping it fixed (on one line)?

Thanks,
Ken

A:

You can make a few changes to ensure the menu doesn't wrap onto two lines under "normal" conditions, but I don't think you can ever be certain it won't happen. For instance, the menu width will depend on the browser zoom level, font and font-size.
Using my browser defaults, your menu is 865px wide. Taking the gutters into consideration, the max-width of the small-screen stylesheet should be 972px, so the drop down menu appears before the menu goes onto two lines. 975px would be a reasonable value to account for some of the idiosyncrasies of different browsers, but it still assumes the user is at 100% zoom, and using the font and font-size you've specified.
responsive.css - line 51
@media only screen and (max-width: 975px) {

Setting a min-width on the menu itself suffers the same problems and as you discovered causes the menu to extend out of the main wrapper.

