Navigation - Underline Hover Style


1. Plugin Info

Add an underline hover style to the header navigation links.

  • Works with Squarespace 7.1

  • Uses Custom CSS


2. Add this code to Custom CSS

// Header Navigation - Underline Hover Style - Ghost //

.header-nav-item a:hover {
  text-decoration: underline;
  text-decoration-color: #000;
}

// Removes Native Active Line //

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

3. Customizable Options

  • Underline Color (On Hover)

  • Remove Native Active Underline

Link color, font size, and family can be changed in Squarespace settings.


4. Plugin Notes

No plugin notes.


Previous
Previous

Mobile Menu Icon - House (#02)

Next
Next

Navigation - Tilt Hover Style