Jump to content

Nav Bar Underline Customization

Recommended Posts

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 comment
  • Replies 4
  • Views 522
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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 comment
  • 1 year later...
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...

Edited by Vit
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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.