How To Remove The Underlines On Links In Squarespace

Abi Bacon

Squarespace Developer based in Southampton, UK

This is probably one of the questions I get asked most. ‘How do I remove the underline on the links?’. Squarespace automatically adds an underline to links both within text blocks and also in your Main Header Navigation.

How To Remove Underline In Text Blocks

We’re going to want to add some CSS to the Custom CSS panel which targets the Text Blocks and the links within them. Its the text-decoration property that we’ll want to be targeting.

.sqs-block-html a {
  text-decoration: none;
}

How To Remove The Underline On The Main Navigation Links

This CSS is slightly different, we’re going to want to target the active header link, and then change the background-image property.

#header .header-nav-item--active a {
  background-image: none;
}

Alternative Styling For Active Links

Although you may not like the underline style you may still want to style the active navigation links so that a user can tell easily which page they are currently viewing.

Instead we could adjust property’s such as font-weight or color.

#header .header-nav-item--active a {
  font-weight: 400;
  color: blue;
}

---