How To Remove The Underlines On Links In Squarespace
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;
}