Pill Hover Style - Navigation

Navigation BarHover Effects
Written By giannis katsaprakakis

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

giannis katsaprakakis https://www.bykatss.com/
Previous

Flip Over Icons - Social Links Block