Create a Pill Hover Effect in Squarespace Navigation

Style your Squarespace header navigation with a pill-shaped hover effect using CSS:

Copy Code

/* Header Navigation - Pill Hover Style */
.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: #F26824; /*update color*/
  padding: 5px 12px;
  border-radius: 50px;
  transition: all ease-in-out .2s !important;
}