Nav Hover Effect Generator

Add polished hover effects to your Squarespace 7.1 navigation links. Choose a style, customize the look, and copy the CSS.

Why this matters

Navigation hover effects are the single most-requested Squarespace CSS customization. They give visitors instant visual feedback, signal clickability, and make your site feel intentionally designed rather than templated. Squarespace 7.1 removed most native hover styling options, so custom CSS is the only way to get them back.

/* Nav Hover: Underline Slide */
.header-nav-list a,
.header-nav-item a {
  position: relative;
  text-decoration: none;
}

.header-nav-list a::after,
.header-nav-item a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: #000000;
  transition: width 0.3s ease;
}

.header-nav-list a:hover::after,
.header-nav-item a:hover::after {
  width: 100%;
}

How to add this to Squarespace

1. Copy the CSS code above.
2. In your Squarespace dashboard, go to Design → Custom CSS.
3. Paste the code at the bottom of the editor.
4. Click Save and hover over your nav links to see the effect.
5. Tip: If your site uses a different header layout, you may also need to target .header-menu-nav-list a for the mobile/hamburger menu.