Active Navigation Link - Pill Style


1. Plugin Info

Add a pill style to the active navigation link.

  • Works with Squarespace 7.1

  • Uses Custom CSS


2. Add this code to Custom CSS

// Active Link Pill Style - Ghost //

.header-nav-item--active a {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #fff !important;
  padding: 2px 15px !important;
  border-radius: 50px !important;
  background-image: none !important;
}

3. Customizable Options

  • Background Color

  • Link Color

  • Border

  • Padding

  • Border Radius

  • Background Image (Removes Default Underline)


4. Plugin Notes

  • No plugin notes


Previous
Previous

Active Navigation Link - Border Pill Style

Next
Next

Mobile Menu - Animated Gif Background