Change the Color of ANY Top Navigation Item

How to Change the Color of Any Squarespace Top Navigation Item

On my site at the moment, I’m highlighting a new course How To: Squarespace Email Campaigns by changing the color of that item in my navigation.

 
change color of first nav item in Squarespace
 

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.

 

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.

Custom CSS Menu in Squarespace

Note: this code works on Brine family templates using Primary Navigation. For other template families or navigation areas, YMMV.

/* 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;    
  }

If this post was helpful, I’d love to know. Drop a note in the Comments ↓ with a link to your site and how you used the CSS.