Site logo

[Resolved] Nav Menu Hover Underline – Exclude Nav Button

Home Forums Support [Resolved] Nav Menu Hover Underline – Exclude Nav Button

Home Forums Support Nav Menu Hover Underline – Exclude Nav Button

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2507857
    Brent Wilson

    I have added a menu underline on hover. But I have also added a nav button. I don’t want the underline on hover for the nav button. How can I exclude that item from underline?

    #2507931
    Leo
    Staff
    Customer Support

    Hi there,

    Modify the menu hover underline CSS to this:

    @media (min-width: 835px) {
        .main-navigation .menu > .menu-item:not(.nav-button) > a::after {
            content: "";
            position: absolute;
            right: 0;
            left: 50%;
            bottom: 12px;
            -webkit-transform: translate3d(-50%,0,0);
            transform: translate3d(-50%,0,0);
    
            display: block;
            width: 0;
            height: 1.5px;
    
            background-color: currentColor;
            transition: 0.2s width ease;
        }
        .main-navigation .menu > .menu-item.current-menu-item:not(.nav-button) > a::after,
        .main-navigation .menu > .menu-item.current-menu-ancestor:not(.nav-button) > a::after,
        .main-navigation .menu > .menu-item:not(.nav-button) > a:hover::after {
            width: 90%;
        }
    }
    #2507939
    Brent Wilson

    That seems to work great! Thanks!

    #2507952
    Leo
    Staff
    Customer Support

    No problem 🙂

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