Middle Navigation Line

Look Demo

Give navigation links a clean and simple underline hover effect. This plugin uses css editor and works with Squarespace 7.0 (Brine template family).

How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Center Nav Line /

@media all and (min-width:770px){
header nav a{
  display: inline-block;
  float: none; 
}

header nav a:hover:after{
  transform: scaleX(1);
}

header nav a:after {
  display:block;
  content: '';
  border-bottom: solid 2px #FECB2F;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
  z-index: 999;
 }
}

Customize

Change the border-bottom color value to change the color.

License

This plugin comes with an Unlimited Use License. View License Terms