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

[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

[Leo]

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 🙂

[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.

[Leo]

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%;
    }
}

[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.

[Leo]

Try this:

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

[Shawn]

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

[Leo]

No problem 🙂

[Author]

Posts