Unwanted change to top nav after editing styles

[kerimucci]

Hello,

I spent some time yesterday updating my CSS to use em units. I've pretty much achieved the look I want. However, now when I click a top nav menu item and go to view any other page but the home page, my last top nav menu item is pushed below the others (creating two lines of menu options). This isn't pretty. I didn't update the skin, so I was wondering if someone could tell me which styles relate to the top nav and what I need to do to make the menu stay the same? FYI, I get the same effect when I view my output from my laptop and my big monitor.

Many thanks for your help!
Keri

[Jbleasdale]

There's a few divs that make up that nav bar after the compile, and if you didn't touch the skin - its possible you altered the style for one of those (maybe you had pre-existing CSS styling part of one of them?)

Can you provide a list of the styles you changed so we can see how they may relate?

[kerimucci]

Unfortunately, I updated lots of styles. But I know I didn't update any divs. I did, however, update my body and p styles. Would this be the cause? I don't want to reduce the font size of my top nav menu items, so would prefer to figure out what I messed up. Also, due to further changes in my other CSS used for the home page, I now see this issue on the home page as well! I'm not having a good day!

[Jbleasdale]

The body sounds like it could be the culprit. Can you post the code so we can see?

[cdschroeder]

Changing the font size of anything (body, p, li, etc.) that affects the top menu could do it. If this is the only issue you are seeing, it's probably not that you 'messed up' something. It's more likely that one of your conversions made the font a bit larger, pushing the menu to two lines.

If you don't want to make the font any smaller, I would recommend widening the main page size just a bit. You can do this in the top nav skin, under Main Page > Size > Maximum Width.

[kerimucci]

Thanks for your replies.

I took the easy route and increased the Main Page Maximum Width in the top nav skin, which worked like a charm.