Underline Effect Only When Hovering

Site URL: https://blog.ultrahuman.com

Code used:

.header-nav-item a:hover {
    text-decoration: underline;
}

The underline effect comes only when you hover over the navigation. I want the underline to be present under all navigation buttons at all times. Can anyone please help?

remove :hover from your rule. 

.header-nav-item a {
    text-decoration: underline;
}

18 minutes ago, iamdavehart said:

remove :hover from your rule. 

.header-nav-item a {
    text-decoration: underline;
}

 

Hey, I tried this, but the underline gets removed completely with this code. I want the underline effect to be present at all times.

OK, add !important to it, which tells it to override any other rule that's been set at the same or a more specific scope. like this:

.header-nav-item a {
    text-decoration: underline !important;
}

On 10/5/2021 at 7:36 PM, iamdavehart said:

OK, add !important to it, which tells it to override any other rule that's been set at the same or a more specific scope. like this:

.header-nav-item a {
    text-decoration: underline !important;
}

 

Thanks a lot, this worked 🙂