Can’t get my navigation menu to indicate the active page

  • Resolved hilarylittle

    (@hilarylittle)


    6 years, 6 months ago

    I assume there’s a CSS conflict somewhere but I can’t find it. Can anyone help me make the menu item on the active page display in red?

    Here’s what I’ve tried via the custom CSS box:

    .main-navigation .menu > .menu-item > a:active, .navigation-top .current-menu-item > a, .navigation-top .current_page_item > a {color: red}

    Thanks for your time!

    Cheers,
    Hilary

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • This selector is correct, and the only one you need:

    .navigation-top .current-menu-item > a

    The problem is that you are overwriting that two lines later when you set the default colour to white:

    .navigation-top .menu > .menu-item > a {color: #fff;}

    This rule has more selectors, so is more specific, meaning that it takes precedence over less specific rules.

    To correct this you need to make sure that the CSS for the active state is more specific. You can do this by making sure that the rule has the same or more selectors and comes after the inactive state CSS. Like this:

    .navigation-top .menu > .menu-item > a {color: #fff;}

.navigation-top .menu > .current-menu-item > a {color: red;}

    In that example both rules have the same number of selectors, but will take precedence because it comes later.

    Thread Starter hilarylittle

    (@hilarylittle)

    Jacob, you’re a genius! Thank you so much!

    Hilary

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Can’t get my navigation menu to indicate the active page’ is closed to new replies.