Pill Hover Style - Navigation

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

Plugin Details

Add a rounded pill hover style to the header navigation links.

Compatibility

  • Works with Squarespace 7.1

  • Uses Custom CSS

Add To Custom CSS

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

.header-nav-item a {
  padding: 5px 12px !important;
  background-image: none !important;
  transition: all ease-in-out .2s !important;
}

.header-nav-item a:hover {
  background: #eee;
  padding: 5px 12px;
  border-radius: 50px;
  transition: all ease-in-out .2s !important;
}

Customizable Options

  • Padding (Non-Hover)

  • Padding (Hover)

  • Background Color

  • Border Radius

  • Transition Speed

Notes

Adjust link spacing in header settings.

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

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

Flip Inverted Hover Style - Navigation
Next

Tilted Hover Style - Navigation