How to Change the Navigation Underline Color in Squarespace 7.1

I’ve written before about how to remove the underline from active navigation items in Squarespace. But what if you want to change the color of the underline instead of removing it? This is a simple fix with some custom code.

Squarespace 7.1 uses a background image with a linear gradient to achieve the default underline. It pulls in your current color and goes from there. To customize the underline color, we’ll simply rewrite the linear gradient code using our own hex color.

In the example below, I’m using red (#990000) but you can use any color you’d like. You’ll need to swap out red for your color in two places.

It’s a minor difference but can add a little extra touch to your design.

active navigation underline, default color, Squarespace 7.1

active navigation underline, custom color, Squarespace 7.1

Add this code to Design > Custom CSS and remember to change out the hex code for your own color in both places:

/* change header nav active underline color */
.header-nav-item--active a {
  background-image: linear-gradient(#990000, #990000) !important;
}

Want to learn more about CSS in Squarespace?

My friend Will Myers has an excellent and affordable course to Learn CSS in Squarespace.