Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Excluding one menu item from being underlined

Home Forums Support Excluding one menu item from being underlined

  • This topic has 3 replies, 2 voices, and was last updated 3 years ago by Leo.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #430900
    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

    GP Premium 1.5.4
    #430913
    Leo
    Staff
    Customer Support

    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 šŸ™‚

    #430947
    James

    That worked like a dream.

    Thanks again, Leo!

    Best,
    James

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