Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Customize Navigation Bar Underlines?


WeAcceptCrypto

Question

Site URL: https://www.weacceptcryptocurrency.com/

I added the following code to my site to add a hovering underline effect to the navigation bar:

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

The problem is that once you actually click on a navigation link, the underline goes way lower vertically than the hover effect. This causes two separate underlines when you scroll over the same page that you're on. It's a minor issue but looks bad.

Is there a way to make all of the nav bar underlines stay at the same vertical position as the hover effect? I want the underlines to be right under the words, so that once a page is clicked there is no double underline upon hovering.

Link to comment
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0

Add to Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...