Pill Hover Style - Navigation

---

Compatibility

• Works with Squarespace 7.1

• Uses Custom CSS

Description

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

---

Add to custom css

// PILL HOVER NAVIGATION MENU - BYKATSS.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: #00000040;
  padding: 5px 12px;
  border-radius: 50px;
  transition: all ease-in-out .2s !important;
}

---

Notes

Adjust link spacing in header settings.

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

Customizable Options

• Padding (Non-Hover)

• Padding (Hover)

• Background Color

• Border Radius

• Transition Speed

---