How do I add an active page indicator to the navigation in Squarespace?

Squarespace 7.1 adds a .header-nav-item--active class to the current page's nav link. Use this to apply an underline, color shift, or any visual indicator that shows users where they are.

An underline offset with a pseudo-element gives a cleaner look than a text-decoration underline. You can control thickness, color, and distance from the text independently.

.header-nav-item--active a {
  color: #e63946 !important;
  position: relative;
}

.header-nav-item--active a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #e63946;
}