How to Add Nav Hover Effects on Squarespace

Squarespace 7.1 gives you exactly two options for navigation link hover states: bold and underline. That's it. If you want a sliding underline, a color fade, a background fill, or any of the other hover effects that modern websites use, you need custom CSS.

The good news is that Squarespace's navigation uses predictable CSS selectors, and a few lines of code can completely transform how your nav feels to visitors. This guide covers the selectors you need, the most popular effects, and how to implement them without breaking your layout.

The Selectors You Need to Know

Squarespace 7.1 navigation links live inside a specific DOM structure. The primary selector for your nav links is .header-nav-list a. This targets every link in your main navigation bar. If you need to target a specific link, you can use .header-nav-item:nth-child(n) a where n is the position of the link.

.header-nav-list a {
  position: relative;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.header-nav-list a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}

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

The ::after pseudo-element is the key to most hover effects. By positioning it absolutely within the link, you can animate width, height, opacity, and transforms to create a wide range of visual effects without adding any HTML to your site.

Popular Hover Effects

The most requested nav hover effects fall into four categories: underline slides, color fades, background fills, and border effects. Each one uses the same base selectors but applies different CSS properties.

Underline slide in from left: This is the most popular effect. The underline starts at zero width on the left side and expands to full width on hover. The CSS above already demonstrates this pattern. You can change the direction by setting left: auto; right: 0; for a right-to-left slide, or left: 50%; transform: translateX(-50%); for a center-out expansion.

Color fade: The simplest effect. Just transition the link color on hover. This works well paired with a subtle underline.

/* Color fade on hover */
.header-nav-list a {
  color: #333 !important;
  transition: color 0.3s ease;
}

.header-nav-list a:hover {
  color: #dc2626 !important;
}

/* Background fill effect */
.header-nav-list a {
  padding: 6px 12px !important;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.header-nav-list a:hover {
  background-color: #1a1a1a !important;
  color: #fff !important;
}

Background fill: Adds a solid background color on hover. This requires adding some padding to the links so the background has room to breathe. Be careful with this one on mobile, as the extra padding can push nav items off screen.

Common Mistakes to Avoid

The most common mistake is forgetting to add position: relative to the link element. Without it, the ::afterpseudo-element won't position correctly relative to the link text.

Another frequent issue is not using !important on your color declarations. Squarespace injects its own theme styles with high specificity, and your custom hover colors will get overridden without it. This is not a code smell in the Squarespace context. It is a necessity.

Finally, always test your hover effect on the active/current page link. Squarespace adds an .header-nav-item--activeclass to the current page's nav item. You may want to style this differently so visitors can still see which page they're on.

Skip the Manual CSS

Writing hover effect CSS by hand means guessing at timing values, testing across browsers, and wrestling with Squarespace's specificity. Our Nav Hover Effect Generator lets you pick an effect, customize colors and timing, preview it in real time, and copy the finished CSS directly into your site's Custom CSS panel.

For more CSS customization techniques, check out our guide to essential Squarespace code injections or browse all of our free Squarespace tools.