Remove Underline from Links in Squarespace 7.1
** UPDATED September 2022 **
If you have a Squarespace website, you know that Squarespace doesn’t offer a lot of options for styling links. In Squarespace 7.1, every link is automatically underlined, with no way to turn off this default setting.
But that’s a quick fix with a few CSS snippets! In this video, I show you how to remove link underlines anywhere on your website…even in the header.
I provide several different snippets of code in this tutorial, so you may want to check out my beginner’s guide to Squarespace CSS if you are new to customizing your website with code.
Remove the Underlines for Your Entire Website
Usually there is no reason to remove the link underlines across your entire Squarespace website, unless you simply prefer the look. But if that’s the aesthetic you’re going for, adding the CSS to your website is really easy. Navigate to the Design menu on your Squarespace website dashboard, and select the Custom CSS option. Then copy and paste the code below into the CSS block.
a { text-decoration: none !important; }
Once you paste this code into your website, it will affect ALL of your pages and blog posts. If you don’t want the changes to go sitewide, keep reading! Further down, I cover how to remove link underlines for specific pages only.
Remove Link Underlines in the Header and Footer
When you remove all of the underlines across your entire website, it removes the underlines from links in the footer as well. But what if you only want to remove the footer link underlines?
Well, there is a code snippet for that too!
Just type the word ‘footer’ at the beginning of the CSS snippet I provided above, or copy and paste the code below.
footer a { text-decoration: none !important; }
Links in your header are a completely different story.
Even if you replace the word ‘footer’ with ‘header’ in your CSS, it won’t affect the header links. That’s because the underlines in the header are actually a background image, not a text decoration!
Yes, CSS can get tricky sometimes. To remove the link underlines for your header menu, you will need to use the following snippet instead.
header a { background-image: none !important; }
Remove Link Underlines on a Specific Page
What about for one page? Can you remove the link underlines for just one page or blog post on your website? You bet!
For this, you will need the Squarespace ID Finder Chrome extension, which allows you to find the collection ID for each of your website pages. Once you have the collection ID for the page you want to remove the underlines from, paste the ID into the code snippet below, and add the CSS to your Squarespace website.
#COLLECTIONID a { text-decoration: none !important; }
But that’s not all. What if you want to remove just one or two link underlines on a page? Turns out, you can do that too.
Instead of removing the underlines for the full page, you can input CSS to only remove links on a specific section of your page. This is a little more complicated, because you will need to count how many sections you have on your page to select the one that you want to customize with CSS. I explain this in more detail in the tutorial video.
#COLLECTIONID #page .page-section:nth-of-type(1) a { text-decoration: none !important; }
You can hone down your customization even further by removing link underlines in certain blocks within sections. Once again, use the Squarespace ID Finder extension to view the block ID. Then you can add it to the CSS below.
#BLOCKID a { text-decoration: none !important; }
Remove the ‘Read More’ Underline
By now you’re probably wondering “How many code snippets do I need???” Fear not, we’re on the last one! This last code snippet is so you can get rid of the pesky underline for the ‘Read More’ link under each blog post.
.blog-more-link::after { background: none !important; }
When you remove the underline for the ‘Read More’ link, it might not stand out well. So I also made a tutorial video showing you how to convert the ‘Read More’ link into a button. Buttons are often better for UI design anyway, and make it easier for website visitors to see your CTA and click the link.
If you’re looking to customize the ‘Read More’ link further, you can actually delete the default link text and replace it with a custom CTA. Click here for my video tutorial showing you how to change the ‘Read More’ text.
