Change the Color of ANY Top Navigation Item
In the past, I’ve highlighted specific nav items like Squarespace Email Campaigns: Step by Step by changing the color of that item in my navigation.
This code is pretty simple, since i can just target the first navigation item. But what if you want to target the third or fourth item of your navigation? I’ll show you how in this post.
You’ll find specific code for the Brine family and Bedford family below. Scroll to the end of this post for code for Squarespace 7.1 (you would use this if you started your site after 2019).
Change the color or style of your first or last Squarespace navigation items.
To change the color of your first navigation item, just add the following code to Design > Custom CSS.
Note: this code works on Brine family templates using Primary Navigation. For other template families or navigation areas, YMMV.
Update: I’ve also added a solution for Bedford family templates at the end of the post.
/* make first nav item orange */
.Header-nav--primary .Header-nav-item:first-child{
color:#ec8349 !important;
}And if you want to add code to change it in mobile view as well, you’ll use this:
.Mobile-overlay-nav-item:first-child{
color: #ec8349 !important;
}Save your code. Then refresh your page and you’ll see your first navigation item is orange. To change the color, replace the hex code with the color of your choice. So, for red, you’d replace #ec8349 with #990000. You can also add lines to change the font, size, or even style it as a button.
Last Nav Item
If you’d like to change the color of your last nav item, do that by using this code:
/* make last nav item orange */
.Header-nav--primary .Header-nav-item:last-child{
color:#ec8349 !important;
}
.Mobile-overlay-nav-item:last-child{
color: #ec8349 !important;
}Change the Color of A Different Top Navigation Item
But what if you want to target the second or third nav item? We’ll change the code slightly, so instead of using first or last, we’ll use nth child. This counts from the left, so your second nav item would be nth-child(2), your third nav item would be nth-child(3), and so on.
Second Nav Item
In this code, I’ll show you how to change the color of your second nav item to orange. You can update the code with any color, or other style, you’d like:
/* make second top navigation item orange */
.Header-nav-item:nth-child(2) {
color: #ec8349 !important;
}And if you’d like to do the same for mobile, use this code:
.Mobile-overlay-nav-item:nth-child(2) {
color: #ec8349 !important;
}For Bedford family templates:
You’ll target these using the URL slug of your nav item. So if you want to target an about page and the URL slug is /about, here’s the code you’ll use. Simply change out the URL slug to match the item you want to target:
#mainNavWrapper a[href="/about"] {
color: #ec8349 !important; }
}To target a particular navigation folder in Bedford, use this code and swap out the URL slug:
#mainNavWrapper .folder-toggle[data-href="/about-us-bedford"] {
color: #ec8349 !important;
}For Squarespace 7.1
Like the Bedford template, you’ll target these using the URL slug of your nav item but with slightly different code. If you want to target an about page and the URL slug is /about, here’s the code you’ll use. Simply change out the URL slug to match the item you want to target:
.header-nav-item a[href="/about"], .header-menu-nav-item a[href="/about"]
{
color: #ec8349 !important;
}In this code the first class .header-nav-item targets the desktop navigation and the second class .header-menu-nav-item targets mobile navigation.
