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

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;


Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

3 answers to this question

Recommended Posts

  • 0

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

If you are looking for a way to add Anchor Links, Gallery Blocks, or a Rotating Banner with Content Blocks overlaid in Squarespace 7.1, you can find all these plugins in our Squarespace add-on store here: www.Squareaddons.com -- Enjoy! 

Link to post

Create an account or sign in to comment

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

  • Create New...