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?