You might have noticed that on your Squarespace site, there is always a line under the page you are currently looking at. This is the default style for an active link, but thanks to CSS, we can remove that underline and change that text to look even more unique!

In this Squarespace tutorial, you’ll learn how to remove the active link underline in Squarespace 7-.1 using CSS. You can change the style of the text using the same selector and this tutorial will show you some creative ways to do that.

All the codes from this tutorial are below, BUT there are a few things you need to know:

→ This is specific for sites built with Squarespace version 7.1. This code will not work for older versions of Squarespace.

→ Fluid engine is a page section and not a type of site; this code is for any 7.1 site regardless of page section or page type .

→ There is more than one way to do this! Code is super customizable, and this is my technique.

Here are the codes from this tutorial. You can change the font weight, color, add background and more using this selector.

This code will give your menu block a solid color background:

.header-nav-item--active a {
background-image: none!important;
font-weight: bold;
color: red!important;
background: yellow
}

Want to install this on a single page?
Check out this tutorial: insidethesquare.co/singlepage