Styling the active nav links in Squarespace 7.1

• 00
• 01
• 02
• 99

You know that super annoying underline that active nav links have in Squarespace 7.1?

Wanna know how to get rid of it?

If yes, then you’re in the right place!

Because today, we’ll be tackling not only how to get rid of that border but also how we can apply our OWN active link styles by reusing the same code that Squarespace is currently working with.

So, if you’re interested in learning how to implement this in your projects, go ahead and jump right into the tutorial!

Tutorial

Overview & timestamps

The process we’ll be using to set up our own active link styles is not the only one we can follow, BUT personally I feel it’s the one that’ll get us to the result we want faster, ESPECIALLY when it comes to styling the inner folder active links while avoiding the inactive ones:

1. 00:00 - Intro

2. 00:50 - Looking for the code used in the native active link style
   We’ll start out by searching for HOW Squarespace is currently targeting the active links and adding that darn underline that sometimes feels so difficult to remove because neither border: none nor text-decoration: none do the trick.

3. 03:07 - Removing the underline from active links in Squarespace 7.1 and changing the font color and styles
   Once we realize what the heck is going on, the process of removing that line and creating our own branded look for the active links will be a piece of cake. We’ll stop with the changes after a few properties but you can keep going if you want!

4. 06:09 - Styling the active links inside folders in Squarespace 7.1
   Next, we’ll move onto styling the active links WITHIN the folder content container, which needs to be targeted differently than the regular links we’ve been modifying so far.

5. 09:58 - Styling the active links on mobile for Squarespace 7.1
   And, last but not least, we’ll also dive into the code for smaller screens to look for the selector we need to modify the active mode of links inside the mobile menu.

And that’s that!

Hope you found the “detective work” of this tutorial insightful and helpful!

Until next time,

B.

---

Full code

/*STYLING THE ACTIVE NAV LINKS IN SQUARESPACE 7.1*/
//Desktop active link
body:not(.header--menu-open) .header-nav-item--active > a,
body:not(.header--menu-open) .header-nav-folder-item--active .header-nav-folder-item-content {
  background-image: none;
  color: #EBD57A !important;
  font-style: italic;
  font-weight: 900;
}

//Mobile active link
:is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content {
  background-image: none;
  color: #EBD57A;
  font-style: italic;
}

(Optional) To get rid of the underline If using the Flex animation sitewide

//Include if using the Flex sitewide animation
.tweak-global-animations-animation-type-flex .header-nav-item:not(.header-nav-item--folder) a::after,
.tweak-global-animations-animation-type-flex .header-nav-folder-item a::after {
  display: none;
}