Remove Underline from Links in Squarespace 7.1

To underline or not to underline, that is the question. If you are reading this, you’ve probably come out on the not underline side of things, for links at least!

---

In Squarespace 7.1 your body text links and footer links are automatically underlined. They also add a line in your navigation header under the active links (the page that you are on).

Now, I don’t always mind a line under my links. I’ve been known to keep the lines in some designs, and even make them larger and more prominent. It really can help people to see where the links are on your page.

But sometimes underlined links or hyperlinks just make your website look messy or way too busy.  Or, the lines look out of place. I generally remove the underline from my footer links to keep things looking cleaner and easier to read.

I also usually remove the lines under the active links in the header. I don’t think these lines are really necessary. So I only keep them if I think they work well with the design. I think most people can already tell what page they are on.

---

So How Do You Remove the Underline from Your Links?

In Squarespace 7.1 you can change the colour of your links in the Site Styles (click on the paintbrush icon to access), but you can’t add or remove the underline there. To do that we’ll have to add a little bit of code in the CSS editor. Don’t worry – it’s easy. Just go to the CSS editor and paste the code.

---

Go to the Custom CSS Editor

1. From the Home Menu click on Website

2. Scroll down past your web pages to the Utilities section and click on Website Tools

3. Click Custom CSS

4. You will now see a window that you can paste one of the following codes into

5. After you paste the code click Save

---

Copy and Paste one of the Following Codes

These codes are slightly different, depending on the design your are trying to achieve. So, choose the one that fits your website design best and simply copy and paste.

To Remove All the Link Underlines from Your Website

This code will remove all the underlines from the links on your entire Squarespace 7.1 website. This means you will have no underlined hyperlinks on your header, footer and body text site-wide. If you only want to remove the lines only on the header, footer or specific page, please see the codes below.

a {

text-decoration: none !important;

background-image: none !important;

}

To Remove the Underline from Your Footer Links Only

footer a {text-decoration: none !important;}

To Remove the Underline from Your Header Links Only

The link underline works a little differently in the navigation, so you can’t just replace the word footer with header. For this link you’ll need to paste the following:

header a {background-image: none !important;}

Remove the Underline from the Header and Footer Links in Squarespace 7.1

If you want to remove the underlines from the header and footer links without removing the underlines from the links in the body text paste the following code.

header a, footer a{

text-decoration: none !important;

background-image: none !important;

}

Remove the Underline from Links on a Single Page

To remove the underline on links in the body and footer of a single page we need to paste our code in different spot.

1. From your Home Menu click on Websites

2. Hover over the page you want to select and click on the cog icon

3. Click on Advanced in your Page Settings

4. Paste the following code into the window

5. Click Save

<style>

  a { text-decoration: none !important; }

</style>

Remove the Underline from a Specific Block

So what if you just have one section or block where you need those underlines removed from your links? We can easily do this using a handy Chrome extension.

1. Download the Squarespace ID Finder Chrome Extension

2. Navigate to your selected page Home > Website

3. Click on the extension icon (looks like a series of blocks)

4. Click on the code over the selected section or block to copy

5. Paste into your Custom CSS window followed by the following code

6. Click Save

  a { text-decoration: none !important; }

Your full code will look something like this:

#block-ID a { text-decoration: none !important; }

The ID will be a string of numbers and letters identifying your block or section.