Stretchy Navigation Line - Version 2

ezgif-3-0beb9d4a66c9.gif

Description

Give navigation links a clean and simple line hover effect. This plugin uses css editor and works with Squarespace 7.1.


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.

// Stretchy Navigation Line - v2 //

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

.header-nav-item--active a {
    background-image: none !important;
}

Customize

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


Previous
Previous

Change Events Box Colors (Summary Block)

Next
Next

Push Mobile Info Bar Behind Mobile Menu