Underline Menu items On Hover

Hello,

I would like to underline each individual menu item when you hover over it. What CSS would I use to do this?

I may also want to keep it underlined when that page is active. Please could you pass on the CSS for this also.

Thanks,

Liv

https://greyhound-keyboard-sa3k.squarespace.com/

@LivAils Add to Home > Design > Custom CSS

/* Hover */
nav.main-nav a:hover {
    border-bottom: 1px solid currentColor !important;
}
/* Active */
nav.main-nav .active-link a {
    border-bottom: 1px solid currentColor;
}

You can also use text-decoration: underline; but i like border-bottom 

Perfect thank you!

Just now, LivAils said:

Perfect thank you!

You're welcome. Reference: 

@tuanphan would you have a code to do this exact thing but use an image or even a .gif for the underline? I’m looking to do this but with a squiggly line, ideally a squiggly line that squiggles as it’s hovered over

On 8/24/2021 at 8:47 PM, christinemcmillen7 said:

@tuanphan would you have a code to do this exact thing but use an image or even a .gif for the underline? I’m looking to do this but with a squiggly line, ideally a squiggly line that squiggles as it’s hovered over

Hi.

This is possible. I used to solve some cases.

Can you share link to your site? Each items will need a different image or same image?

Hi @tuanphan, just wanted to say I've used SO many of your tips on this forum - thanks for what you do!

I'd love to add an underline to my client's menu, as well as each of the sub-menu items when they are hovered. I tried the above code but it didn't work for me. 

Would you mind if I DM you the website title and password?

Thanks!

On 3/11/2023 at 8:32 AM, Ogloza said:

Hi @tuanphan, just wanted to say I've used SO many of your tips on this forum - thanks for what you do!

I'd love to add an underline to my client's menu, as well as each of the sub-menu items when they are hovered. I tried the above code but it didn't work for me. 

Would you mind if I DM you the website title and password?

Thanks!

 

Yes. You can send, we can check easier

@tuanphan Hi there, I am also trying to achieve the same underline hover & active effect but I would like to have a slight animation where the underline appears from left to right? 

Can I message you my URL and site password to help? 🙂 

On 4/10/2023 at 12:36 PM, SummerKateDesigns said:

@tuanphan Hi there, I am also trying to achieve the same underline hover & active effect but I would like to have a slight animation where the underline appears from left to right? 

Can I message you my URL and site password to help? 🙂 

Yes. You can send, we can check code easier

@tuanphan Hello, I am also trying to achieve the same underline hover with a white line? Can you help if I send you my site URL and site password?

On 8/12/2023 at 12:58 AM, buffedmedia said:

@tuanphan Hello, I am also trying to achieve the same underline hover with a white line? Can you help if I send you my site URL and site password?

Yes. You can send site url + Password, we can help you easier

@tuanphanHi, I've tried various code and your code from above, but for some reason I am still not able to achieve an underlined hover when scrolling over the menu items including dropdown menu. Here is the link to my site: www.ethanparker.co.uk/ 

Any help would be appreciated. Many thanks!

On 8/23/2023 at 8:40 PM, ethanparker said:

@tuanphanHi, I've tried various code and your code from above, but for some reason I am still not able to achieve an underlined hover when scrolling over the menu items including dropdown menu. Here is the link to my site: www.ethanparker.co.uk/ 

Any help would be appreciated. Many thanks!

You can use this CSS code

div.header-nav-item>a:hover, div.header-nav-folder-item>a:hover {
    border-bottom: 1px solid black;
}
div.header-nav-folder-item>a {
    display: inline-block;
}