Nav Bar Underline Customization

Site URL: https://www.hknglobal.org

Site: hknglobal.org       Pass: HKN

So I'm designing a new website for a client, and I found a way to manipulate some code so that on hovering over links in the nav bar, an animated underline would show up. The referenced code is below. What I want to do now is change the active nav bar underline to match the hovered underline so that it looks smooth. How would I go about doing this? Not very CSS savvy as my business is more about modernizing organizations' existing pre-2000s digital infrastructure. Thanks!!! 

.header-nav-item a:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
a:hover:after { 
  width: 100%; 
  left: 0; 
}
@media screen and (max-height: 300px) {
    ul {
        margin-top: 40px;
    }
}

@snandwani are you wanting to have the text underline remain for the active page?

2 minutes ago, ryandejaegher said:

@snandwani are you wanting to have the text underline remain for the active page?

 

correct.

If you’d like to take this one step further and give the link a highlight effect rather than just an underline, we have a freebie addon for that here— www.squareaddons.com

On 6/18/2020 at 2:45 AM, Kate said:

If you’d like to take this one step further and give the link a highlight effect rather than just an underline, we have a freebie addon for that here— www.squareaddons.com

This addon has external CSS which extremely slows down the load time for a page with this stylesheet enabled. Probably, the issue is with slow server where this CSS is hosted. Most times the page just stalls with black colour and doesn't load at all...