snandwani
-
Posts
6 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by snandwani
-
-
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; } }
Nav Bar Underline Customization
in Customize with code
Posted
correct.