Changing Squarespace Nav Link Colors with Code! [Beginner Tutorial - 2024 version] 

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. You'll find most of the codes below; I can't include some symbols in a youtube description so head over to my blog to grab the individual page code: insidethesquare.co/squarespac...
Chapters:
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 the color using a color code that matches your own unique website 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
}
Related Content:
📝 Original blog post → insidethesquare.co/squarespac...
🔗 Make your account login link to look like a button: insidethesquare.co/squarespac...
🎨 A free guide to color codes (article): insidethesquare.co/colors
📱 Creative mobile menu ideas: insidethesquare.co/squarespac...
📑 My Squarespace code collection → insidethesquare.co/css
📖 Learn CSS for FREE → insidethesquare.co/learn
❤️ Support my channel with a donation → buymeacoffee.com/insidethesquare
🙋‍♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help
- - -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥ #WebDesign #CSS #Tutorial #SquarespaceTutorial #WebDevelopment #CreativeDesign #UIUX #CodeTutorial