Pill Hover Style - Navigation

Bookmark Plugin

---

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.

---