Lefty Navigation Line

ezgif-5-2048bc76bef6.gif

Step One

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Two

Copy and paste the code below into the Custom CSS Editor box.

// Left Nav Line //

@media all and (min-width:770px){
header nav a{
  display: inline-block !important; 
  float: left;
}
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;
  transform-origin :0% 100%;
 }
}

Step Three

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

Save and refresh the page. 👍

Moov Labs