Stretchy Navigation Line


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.

// Stretchy Navigation Line //

.Header-nav-item::after {
  content: '';
  background: #000000; //color
  height: 2px; //thickness
  width: 0;
  display: block;
  margin-top: 2px !important;
  transition: width 1s; //animation speed
  margin: 0 auto;

.Header-nav-item:hover::after {
  width: 100%;

Step Three

Change color, thickness, and transition speed to your liking.

Save and refresh the page. 👍

Moov Labs