Navigation - Pill Hover Style

---

1. Plugin Info

Add a pill hover style to the header navigation links.

• Works with Squarespace 7.1

• Uses Custom CSS

---

2. Add this code to Custom CSS

// Header Navigation - Pill Hover Style - Ghost //

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

---

3. Customizable Options

• Padding (Non-Hover)

• Padding (Hover)

• Background Color

• Border Radius

• Transition Speed

---

4. Plugin Notes

• Link spacing can be adjusted in Squarespace settings.

---