Underline Hover Style - Navigation

Site Header
Written By The Ghost Co.
Send a Thank You

Plugin Details

Add an underline hover style to the header navigation links.

Compatibility

  • Works with Squarespace 7.1

  • Uses Custom CSS

Add To Custom CSS

// HEADER NAVIGATION - UNDERLINE HOVER STYLE - GHOSTPLUGINS.COM //

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

// REMOVE NATIVE ACTIVE UNDERLINE - GHOSTPLUGINS.COM //

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

Customizable Options

  • Underline Color (On Hover)

  • Remove Native Active Underline

Notes

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

The Ghost Co. http://www.ghostplugins.com
Previous

Tilted Hover Style - Navigation
Next

Upside Down Hover Style - Navigation