How To Customize Squarespace Navigation Link Colors

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

---

About This Tutorial

This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

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.

Squarespace Tutorial

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

---

Code Example

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

/* main navigaiton links */
.header-nav a{
  color:blue!important
}

/* dropdown folder links */
.header-nav-folder-content a{
  color:#fff!important
}
/* account login link */
.user-accounts-text-link {
  color:yellow!important;
}
/* mobile menu links */
.header--menu-open .header-menu-nav-folder-content a{
  color:blue!important
}

/* mobile menu login link */
.header--menu-open .user-accounts-link a{
color:red!important
}

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:

<style>
  /* main navigaiton links */
.header-nav a{
  color:blue!important
}

/* dropdown folder links */
.header-nav-folder-content a{
  color:#fff!important
}
/* account login link */
.user-accounts-text-link {
  color:yellow!important;
}
/* mobile menu links */
.header--menu-open .header-menu-nav-folder-content a{
  color:blue!important
}

/* mobile menu login link */
.header--menu-open .user-accounts-link a{
color:red!important
}
 </style>

---

Related Content

🔗 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