In this tutorial, you'll learn how to customize the navigation link colors on your Squarespace website using simple code. We'll update all the links, the dropdown links, the account login link, and the mobile links separately. I'll also show you how to add this code to a single page.

By following along with this step-by-step tutorial, you'll be able to easily change the look of your navigation links to match your website's branding.

Use the chapters below to jump ahead to any spot in the video.

Here are some time stamps in case you want to jump ahead in the video above!

02:04 change all header navigation link colors

02:35 Change the dropdown colors

02:57 Change the account login color

03:33 Change the link color in your mobile menu

04:00 Change the account login color only in your mobile menu

04:53 add code to a single page using page header code injection

06:04 Add code to a single page using a code block

Here are the codes from this tutorial. Make sure you update important values like the colors to make these codes uniquely yours!

Want to add your code to an individual page? If you’re using page header code injection or a code block, copy this code below so it will include the style brackets you need:

🔗 Make your account login link to look like a button → insidethesquare.co/squarespace-tutorials/member-login-button

🎨 A free guide to color codes (article) →insidethesquare.co/colors

📱 Creative mobile menu ideas → insidethesquare.co/squarespace-tutorials/5-mobile-menu-ideas

📑 My Squarespace code collection → insidethesquare.co/css

📖 Learn CSS for FREE → insidethesquare.co/learn

❤️ Show your appreciation with a donation → buymeacoffee.com/insidethesquare

🙋‍♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help