How to remove underline from Squarespace navigation links and add color on hover

Have you ever visited a website and instantly recognized it is a Squarespace site because of the underlined navigation links? Some people like this feature, but others find it unappealing. I personally like this design but if you’re not a fan, don’t worry – I’m here to help!

In this blog post, I’ll show you how to remove the underline from your Squarespace navigation links and add color on hover instead, giving your website a more unique and customized look.

We’ll need to add a small bit of CSS code to your site. If you’re worried about coding, don’t be – it’s much simpler than it sounds! Just follow along, and you’ll have it done in no time.
So first, go to Custom CSS.

Open custom CSS in Squarespace

There are two options for opening the Custom CSS.

Open CUSTOM CSS – Option 1

In the left menu, click on the search icon at the top and start typing “Custom CSS.” Click on the result, and Custom CSS will appear in the left sidebar.

Open CUSTOM CSS – Option 2

If you’re interested in navigating manually to find the Custom CSS, here’s how:

• In the left sidebar, go to the Website tab.
• Click on Pages.
• Scroll to the bottom of the page. Under Utilities, click on Website Tools..
• On the next page, click on Custom CSS.

This will open the Custom CSS editor, where you can easily add code to adjust your site’s design

Remove underline on hover

Copy and paste the following code to the Custom CSS field:

Add color on hover

Copy and paste the following code to the Custom CSS field:

Add color to active page link

Copy and paste the following code to the Custom CSS field:

Note: The #222222 and #005555 are the HEX codes of the colors. Replace it with your selected color’s hex code.

And that’s it – you’ve successfully removed the underline from your Squarespace navigation links and added color on hover.