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

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

[Tom]

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 🙂

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

[Tom]

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

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

[Tom]

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?

[Andrew]

Works Perfect!

Thanks

[Tom]

You’re welcome 🙂

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

[David]

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

[Author]

Posts