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;
}
}
