How can I stop the spry menu from wrapping when zooming in and out with the browser?

Question

I have been to the end of the internet and back trying to solve this. Here is the page withe the spry menu. You will notice some inline styling to get it to fit the design of 980px wide. The HTML

Here is the spry CSS.

    [CSS][2]

Answer 1

I set this in firebug:

ul.MenuBarHorizontal {
    width: 1200px;
}

Which shows the navigation menu is wider than 980, which is why it is wrapping around. You need to strip off five or ten pixels from the padding or margins of your menu items.

ul.MenuBarHorizontal a {
    padding: 9px 20px;
}

Seems to work well. And actually, you can take that second padding value up to 26px without it wrapping around.