[Resolved] Exclude nav item from current hightlight (2 part)

Home Forums Support Exclude nav item from current hightlight (2 part)

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #981406
    Shawn

    Hi,

    1) I’m using the menu decoration here https://docs.generatepress.com/article/adding-menu-hover-animation/

    In the nav I also have a link to an anchor which lives in one of the other pages in the nav. All works great except when on that page both the parent and the anchor are underlined in the nav.

    How can I have all links underline on hover but exclude the anchor from the current item underline?

    2) Then on the off canvas panel I’m not using that effect, just background colour/text to indicate current. I also need to exclude the anchor from the current item change.

    Thanks

    #981625
    Leo
    Staff
    Customer Support

    Hi there,

    1. Sorry I’m a little bit confused. Currently not seeing the hover animation. Have you decided against it?

    Can you explain a bit more on what should happen and which menu item I should be looking at?

    2. Looks like you’ve already done this?

    Let me know 🙂

    #981732
    Shawn

    Oh I’m so sorry. I made a change late last night and forgot to change it back. I’ve changed it now.

    It’s active state underline. If you click on About then both it and the link to an anchor (Di Thompson) on the about page are underlined.

    On desktop they’re underlined.
    https://drive.google.com/file/d/1fnWU6jWdiIftSiGGaxlJjRz3HnvE9QbR/view?usp=sharing

    On mobile they’re both highlighted
    https://drive.google.com/file/d/1BfpaAvIHkUIvaBAP0KYHomEY_L0KxPP3/view?usp=sharing

    So I basically need to exclude the active state from the Di Thompson link.

    #982189
    Leo
    Staff
    Customer Support

    Modify this block of CSS:

    @media (min-width: 769px) {
    .main-navigation .menu > .menu-item.current-menu-item > a::after, .main-navigation .menu > .menu-item.current-menu-ancestor > a::after, .main-navigation .menu > .menu-item > a:hover::after {
        width: 50%;
    }

    to this:

    @media (min-width: 769px) {
        .main-navigation .menu > .menu-item.current-menu-item:not(.menu-item-275) > a::after, 
        .main-navigation .menu > .menu-item.current-menu-ancestor:not(.menu-item-275) > a::after, 
        .main-navigation .menu > .menu-item > a:hover::after {
            width: 50%;
        }
    }
    #982210
    Shawn

    Brilliant. Thanks very much.

    And how can I prevent the same item from being highlighted as current on the off canvas? It’s just the standard off canvas.

    #982477
    Leo
    Staff
    Customer Support

    Try this:

    .slideout-navigation.main-navigation .main-nav ul li.menu-item-275[class*="current-menu-"] > a {
        background-color: transparent;
        color: #333;
    }
    #982593
    Shawn

    Perfect. Thanks so much. This is why I love GP

    #982927
    Leo
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.