[Resolved] Excluding one menu item from being underlined

[James]

Hey, quick question. I know the topic of creating underlined nav menu items being hovered over has been discussed. I was wondering, is there a way to make it to where one of my menu items is not underlined? I have my logo in the center of the nav between menu items, and I’d like that to not be underlined. I know I can add a class to the logo, something like .center-logo.

Here is this css I’m using provided by Luiz Bills:

/* nav links effect */
.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);

    display: block;
    width: 0;
    height: 2px;

    background-color: currentColor;
    transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
    width: 50%;
}

Thanks for any help.

Best,
James

[Leo]

Hi James,

First add a custom class, menu-hover, to the menu items you want to have hover effect:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Then edit the code to this:

@media (min-width:769px) {
    /* Menu Hover underline animation */
    .main-navigation .menu > .menu-item.menu-hover > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 2px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);

        display: block;
        width: 0;
        height: 2px;

        background-color: currentColor;
        transition: 0.3s width ease;
    }
    .main-navigation .menu > .menu-item.menu-hover.current-menu-item:not(.exclude-hover) > a::after,
    .main-navigation .menu > .menu-item.menu-hover > a:hover::after {
        width: 50%;
    }
}

Let me know 🙂

[James]

That worked like a dream.

Thanks again, Leo!

Best,
James

[Leo]

No problem 🙂

[Author]

Posts