Question

I am building a Joomla template and I have a problem with menu width that I have never discovered a cure for. When I make a text based menu, some items always go in two lines when zoomed or the resolution has changed, for example:

[ Item 1 ] [ Item 2 ] [ Item 3 ] [ Item 4 ] [ Item 5 ]

Becomes

[ Item 1 ] [ Item 2 ] [ Item 3 ] [ Item 4 ]

[ Item 5 ]

So basically, when I make a text based menu, the width always will change. However, If I make it image based, the problem is fixed, but it can’t be used for this project as it has too many menu items and some of them might be changed down the road.
I have seen a site, that regenerates the font size every time you zoom in/zoom out on the site to keep sites defined width, however I don’t remember it anymore.
Do any of you have ideas? There must be some kind of script to force text based menus defined width no matter the browser font size settings, zooming or display resolution.

Thanks in advance.
By the way, here is the site: http://business.delux.lv/
I have actually noticed a lot of sites with this problem, but some just don’t have so much menu items for them to ever go in two lines, so that kinda makes it not too noticeable.

Answer 1

Add this to the menu css style

white-space:nowrap;