Secondary menu with separate class?

Community Forums Forums Design Tips and Tricks Secondary menu with separate class?

This topic is: not resolved

This topic contains 5 replies, has 4 voices, and was last updated by  Stefsull 2 months, 3 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #88599

    gagn
    Member
    Post count: 4

    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.

    #99886

    Susan
    Moderator
    Post count: 8700

    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!


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #108186

    perfect image
    Member
    Post count: 3

    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?

    #108197

    Stefsull
    Participant
    Post count: 47

    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…

    #108199

    perfect image
    Member
    Post count: 3

    That helped immensely!

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

    Thank you so much.

    #108203

    Stefsull
    Participant
    Post count: 47

    Always happy to help on things I’m good at… I’m so new at too much of this WP stuff. ;)

    Cheers

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.