If you’ve been wondering how to change the color of the links on your Squarespace 7.1 site’s Main Navigation, you’re not alone! The good news is that you can simply add some CSS (cascading style sheets) code for this effect. In this blog post, we’ll walk you through how to do it.

Steps to follow…

1. Log in to Your Squarespace Account Dashboard.

2. In the left-hand side navigation bar, go to Website > Pages > Utilities > Website Tools > Custom CSS

3. This is where you will enter the CSS code.

4. Copy and Paste the following CSS code:

IMPORTANT NOTES:

a) The text in between the // // is for comments to describe what the CSS does and is good practice to use them so you know for future reference what is does.

b) The Hex color in the example can be changed to your own preferred hover state color choice.

5. Once you have added the CSS code, don’t forget to Save.

Our Experience With This Effect

This is a nice effect for a website’s main navigation, and it is quick and simple to add with some CSS. We, therefore, use this often in various Squarespace site projects for our clients.

Need Help? Contact Razor Web Design

If adding the CSS doesn’t work for you, or if you need professional assistance with this or any other aspect of your website, please don’t hesitate to contact Razor Web Design. Whether it’s a minor tweak or a large project, we’re here to help you get the most out of your website. Contact us today. We’d be happy to assist!

Next Step…

Take advantage of a FREE 15-minute, no-obligation whatsoever Discovery & Insights call offered by Razor Web Design. On this call, you will learn about ways you can enhance and improve your website to engage your site visitors better, increase website traffic and visibility, and optimize user experience. Simply find a convenient 15-minute minute slot on the calendar that works for you and book your free call.