Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 1, 2016 at 11:17 pm #576084
    sophie_doblhoff

    Dear Team

    How to highlight the active Menu/Sub-Menu item (background/color)?

    I tried 

    li.current-menu-item>a  {
background-color: #d11242 !important;
color: white !important;
}

    but then beside the main menu item several sub-menu items are highlighted because there is not just a single current_menu_item if the page loads.

    Screenshot of mulitple selected menu items / sub-items.

    Thanks for your advice.

    February 2, 2016 at 2:19 am #576155
    Elliott

    Hi sophie_doblhoff!

    Add this.

    #top .sub-menu a { background-color: white !important; color: black !important; }

    Best regards,
    Elliott

    February 2, 2016 at 9:44 am #576329
    sophie_doblhoff

    Hi

    Thanks for your message, that did not solve the problem.

    The goal is to highlight the currently active menu-item / sub-menu-item. And the problem is, that several menu-items are “current_menu_item” when the page loads.

    Any advice appreciated.

    February 2, 2016 at 6:14 pm #576614
    Yigit

    Hey!

    It seems like you have figured it out already? :)

    Regards,
    Yigit

    February 2, 2016 at 9:04 pm #576689
    sophie_doblhoff

    Hey!

    Thanks for your message, we changed the first menu-item in Design/Menu from an “individual link” to a “site”.

    Anyhow, this solved the problem, but I’m curious if there is a CSS based solution for our next projects? Highlighting the current menu-item / sub-menu-item is a common task, is there any best-practice based on your experience?

    Best regards,
    Soph

    February 4, 2016 at 5:10 am #577547
    Ismael

    Hi!

    You can use the active-parent-item selector if you want to target the parent menu item’s active sub menu:

    .active-parent-item .sub-menu .current-menu-item a {
    background: black;
    color: red;
}

    Regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.