Underline menu on mouseover

Hey there tbucks11,

Hope you’re well today!

This could be done with some custom CSS. Please try adding the following CSS code in the style.css file of your child theme or if your theme doesn’t have custom CSS tab add it in your site using the following plugin:

https://www.ads-software.com/plugins/simple-custom-css

.main-navigation ul.nav-menu > li > a:hover {
text-decoration: underline;
}

This should display underline on your menu item when hovered.

Hope this helps ??

Best regards,
Bojan

Hey Bojan, I’m doing great and you?
Thank you kindly for your help, sadly this did not work!

Hey there tbucks11,

I’m great, thanks ??

Is the code removed now? If yes could you please add it again and let me know so I can take a look?

Cheers,
Bojan

I just put it back Bojan!
Thanks so much for your time on this.

Hey again,

I just checked your site and the code is working fine as you can see on this https://screencast.com/t/BaMg8QdDT.

So I guess it’s just a caching issue. Please clear browser cache and check if it works again ??

Cheers,
Bojan

Ah yes it does! That’s so great!
Is there a way that I can make the underline a bit bolder, and to make it appear more smoothly? I’m hoping to achieve something like on this website’s menu: https://sleak.tv
Thank you!!

Hey again tbucks11,

Sure thing this can be done with adding border but the line will cover the whole menu button instead of just text. Replace the code I gave you with this one:

.main-navigation ul.nav-menu > li > a:hover {
border-bottom: 2px solid #000;
}

.nav-menu > li > a {
border-bottom: 2px solid #fff;
transition: all 0.5s ease;
}

Please tell me if this is what you wanted ??

Cheers,
Bojan

Hey Bojan,

I just replaced it and resetted Safari but I feel like nothing changed since the last code! Tell me if I’m wrong, maybe it just needs some time to go through?

Hey again,

I checked it in Safari and it’s working for me. Just clear browser cache and you’ll be able to see the changes ??

Cheers,
Bojan

Thank you Bojan,
I managed to see it in Firefox, actually what Im looking for is closer to the previous code, just with a bolder line and the smooth transition like the menu here: sleak is that somehow possible?
Im so sorry for the bother!

Hey again,

Unfortunately this is the closest I can get it without altering the code too much. The difference two sites is in menu items which are smaller (width of the li) there and so is the border bellow them.

The site you are referring to is using bottom border and not text underline. You can’t increase the gap between the text and the line when you use underline instead of border.

This is the closest I can do.

Best regards,
Bojan

Hi, thank you so much for all your research,

I understand what you mean now. Is it possible then to put a border below my text instead of the underline? (Sorry if my questions are a little amateur!)

Cheers
Tha?s

Hey Tha?s,

This should do it, please try replacing the code with this one:

.main-navigation ul.nav-menu > li > a:hover {
border-bottom: 2px solid #000;
}

.nav-menu > li > a {
border-bottom: 2px solid #fff;
transition: all 0.5s ease;
padding: 15px 0 3px;
margin: 0 50px 12px;
}

Hope this is what you’re trying to do ??

Cheers,
Bojan

This is awesome, thank you Bojan you are fantastic!!
That’s exactly what I wanted.
Have a great day and thank you again for all your work!

Warmest regards,
Tha?s

Hello guys.
I wanted to do the same, followed Bojan – WPMU DEV explanation but it doesn’t seem to work for me. any ideas?

Please help ??

This is my site:
https://surround-sound.co.il/