Stretchy Navigation Line

• Look Demo
• How To Install
• Customize
• License

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

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

Copy Code

// 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%;
}

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

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