Secondary menu with separate class?

[gagn]

Using Executive Pro, and have the following question to the CSS-masters out there:
How do I specify a separate class for the secondary menu? At the moment, it shares class with the primary menu.

Thanks for all input.

[Susan]

As you asked this a while ago, I hope you were able to get it resolved. If not, check back in, and I will escalate it for you.

If it is resolved, please mark it as resolved, and I will close it.

Thanks!

[perfect image]

I would still like to know the answer to this. I have a secondary nav menu that i want to have different styles assigned to other than those for the primary. Cant seem to figure out the css markup to customize the secondary menu. Any help would be greatly appreciated!

Look at the link: http://www.perfectimagemktg.com/pi2/

as reference, How do I go about either removing the grey hover on the secondary menu links or change the size of the the grey box hover on the secondary nav links?

[Stefsull]

Your best bet would probably be to be more specific with those hover classes so they only apply to the main menu. Even though both menus have the same class (.genesis-nav-menu), they're in containers with different classes. The main menu is in the nav container called .nav-primary and the secondary menu is in a nav container called .nav-header.

By writing styles more specifically you can target the menus separately:

.nav-primary .genesis-nav-menu { property: value; } - targets only the main menu.

.nav-header .genesis-nav-menu { property: value; } - targets only the secondary menu.

However, anything written as .genesis-nav-menu without the modifier class prior to it will apply to both menus.

If it were me, I'd write the shared styles with the simple .genesis-nav-menu class and divide up the rest with the more specific selectors... rather than trying to override the unnecessary styles with further CSS.

The rule you need to divide up to get rid of those hovers is this one:

.genesis-nav-menu li:hover, .genesis-nav-menu a:hover {
color: FFFFFF; /* this color isn't being applied because it's missing the # (should be #FFF) */
background-color: #dbdbdb;
text-decoration: none;
border-radius: 0.4em;
-moz-box-shadow: inset 0 0 2px #444;
-webkit-box-shadow: inset 0 0 2px #444;
box-shadow: inset 0 0 2px #444;
}

Hope that helps...

[perfect image]

That helped immensely!

Thank you for thoroughly explaining that....I totally understand now. Very appreciative of the quick detailed response.

Thank you so much.

[Stefsull]

Always happy to help on things I'm good at... I'm so new at too much of this WP stuff. 😉

Cheers

[Author]

Posts