[Resolved] modifying the Underline on current menu item and on hover sub-menu item

Home Forums Support [Resolved] modifying the Underline on current menu item and on hover sub-menu item

Home Forums Support modifying the Underline on current menu item and on hover sub-menu item

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #516583
    Andrew

    Hi All,

    I’m using the following code to add an underline under my main navigation menu items on current item and on hover. I’m wondering if there is a way to eliminate the underline completely from the sub-menu, which is currently becoming a strikethrough anyways.

    2nd question… under the top level menu items with the sub-menu drop-down arrow is there a way to make the line only extend to the length of the menu word/letters, to look the same as non-drop down items. In other words, I’d like the underline to just underline the word/letters, instead of extending past the down arrow like it currently does under the “About” and “Why” menu items. Website can be viewed here https://woodandsaw.com/

    .main-navigation li a:after {
    opacity: 0;
    transition: opacity 400ms ease-in-out;
    content: “”;
    }

    .main-navigation .main-nav ul li[class*=”current-menu-“] > a:after,
    .main-navigation .main-nav ul li:hover > a:after,
    .main-navigation .main-nav ul li.sfHover:hover > a:after {
    content: “”;
    display: block;
    width: 100%;
    border-bottom: 3.0px solid #ffffff;
    position: relative;
    top: -10px;
    opacity: 1;
    }

    GeneratePress 2.0.2
    #516759
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    It looks like you figured out the first issue?

    As for the second issue, we’ll need to add some HTML to the menu item in order to target the text only.

    In “Appearance > Menus”, open your menu items.

    Wrap each navigation label in a <span> like this: <span class="menu-text">Your Navigation Label</span>

    Once you do that let me know and I’ll write up the code 🙂

    #517087
    Andrew

    Hi Tom,

    Thanks for the quick reply.

    I was able to figure out my first question from a previous forum post/reply you wrote.

    I just completed wrapping the navigation labels in the <span> you sent over.

    Let me know the next step.

    Thanks for all your help!

    #517437
    Tom
    Lead Developer
    Lead Developer

    Give this CSS a shot:

    .menu-text {
        position: relative;
    }
    
    .main-navigation .menu > .menu-item > a .menu-text::after {
        content: "";
        position: absolute;
        right: 20;
        left: 50%;
        bottom: -10px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        display: block;
        width: 0;
        height: 3.0px;
        background-color: currentColor;
        transition: 0.5s width ease, 500ms opacity ease;
        opacity: 0;
    }
    
    .main-navigation .menu > .menu-item.current-menu-item > a .menu-text::after,
    .main-navigation .menu > .menu-item.current-menu-ancestor > a .menu-text::after,
    .main-navigation .menu > .menu-item > a:hover .menu-text::after {
        width: 100%;
        opacity: 1;
    }
    #517862
    Andrew

    It works perfect on Chrome and Firefox, but on Safari when the line retracts after hover it leaves small vertical lines in random patterns where the underline was.

    Thanks again! your theme support is amazing me.

    #518311
    Tom
    Lead Developer
    Lead Developer

    That’s weird, looks like some sort of rendering error in Safari.

    I just made a slight change to the CSS above – can you give it a try?

    #518824
    Andrew

    Works Perfect!

    Thanks

    #518945
    Tom
    Lead Developer
    Lead Developer
    #631445
    Krisztián

    How can I modify this code to underline just the text not the full menu item?

    https://cl.ly/tCGT

    I found the menu item have 20px margin left & right, but didn’t find the correct way to apply this to the underline too.

    #631485
    David
    Staff
    Customer Support

    Hi there,

    the method Tom provides here does only underline the text but must wrap the menu labels in span tags as he mentions here:

    https://generatepress.com/forums/topic/modifying-the-underline-on-current-menu-item-and-on-hover-sub-menu-item/#post-516759

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