How to Change the Header Color on Only One Page in Squarespace
Learn how to change the header color on only one page on your site so your logo always looks finger-licking good.
Being able to change the header color can help big time when you have a logo that doesn’t always look good on every page. Especially if you have an adaptive header that shows the underneath color of the first section.
So, there’s two ways we can do this, and both involve using code to make sure we only affect one page at a time.
Before we get into it, if you’d prefer to watch and learn then click the video below! And you can check out other cool tutorials and educational videos on my channel. :)
Learn how to change header color on only one page on Squarespace website
-
[00:00:00.00]
Hey, everyone. In this video, I want to show you how to change the header color, specifically on one page, instead of changing it and then having it reflect on all pages on the site. Because, for example, one page, it could look really good, a darker color or something. So your logo pops. But then on another page, you want to have a white or a light-colored background, but then the logo, you can't really see it and it looks bad, right? So this is how you do it on one page. Two ways to do it. I'll show you the first using Custom CSS. I mean, both ways are with code. First is in the Custom CSS section. So within this page, we I'm going to change the blue background header to orange, to make it look good. So the first thing that we will do is go down to Custom Code, Custom CSS, go all the way down, or wherever you can enter new code in, if you have none. And then I have this extension, and when I turn it on, it allows me to obviously see all of the IDs and the collection ID here and section and block IDs and all these things.
[00:01:21.06]
So what we want is the collection. So if you click on that, it gets copied. And I'm going to paste this here. And, I'll turn this off for now. Then what we have is, and you can find this code in the description, but right after this, I'm going to paste this line of code here. And what we want to do is put a space there. Okay, so now it is targeting the header, and it obviously changed the background to white. But the problem is that it's not the color we want. Let's see my code here. E5, 4, B2C is the color for orange. And so now we have the header color changed, which looks great here. If I click Save and then go back. If I go to the homepage, for example, then it will be blue as opposed to being orange. That's really handy when you have different themes or styles and stuff across pages. Now, the second way to do it, if we just cut this code down here, is by doing it within the page code injection header. I think I said that right. I don't know. So let's just save this.
[00:02:47.12]
So now we're at the starting point again. And if we click on the gear icon to the About page and click on Advanced, then we have this add code box here. So If I go down to the blog post on my other monitor, then what we want to do is grab the code that we need for that. So this is going to be within style tags. There we go. We have style, then the ID, which is header, and then we have background, which is black, and then we have style. If I just save that, it should reflect here and make it black. But again, I don't want that color, so you can put in your hex code and do E54B2C. And then Hex. So now, if you click Save, it should be orange. Perfect. And again, it is still only targeting this page because if I click on the Home again, then we have it blue, maybe Portfolio Page, it's still blue, and then the About page, it is orange. So two ways to do it. Pick your poison and have fun. Now, if you found this video helpful, go ahead and give it a like and a thumbs up, and subscribe for more tips and tricks.
Method 1: Using CSS and a Page’s Collection ID
Step 1: Find the Page’s Collection ID
Every page in Squarespace has a unique identifier called a Collection ID. You can use it to apply styles to only that page.
If you don’t have the Squarespace ID finder extension from Chrome, than you can find the Collection ID another way below.
Here’s how to find it through the inspect tool:
Open the page in your browser.
Right-click anywhere on the page and choose Inspect or View Page Source.
Look near the top of the code for something like this:
<body id="collection-XXXXXXXX">
That collection-XXXXXXXX is your unique page ID.
Step 2: Write the Custom CSS
Now use that Collection ID to target your header. For example:
#collection-XXXXXXXX header {
background-color: #ffffff !important; /* Replace with your desired color */
}
Just replace #collection-XXXXXXXX with your actual Collection ID, and replace #ffffff with your preferred color code (HEX, RGB, or named color).
Ready to work with a designer to get an awesome, high-converting website? Book a call and let’s chat!
Step 3: Add it to Squarespace
Go to Pages > Custom CSS in your Squarespace dashboard.
Paste your custom CSS in the box.
Click Save.
Want to target more than one page?
No problem. Just repeat the rule with the other Collection IDs:
#collection-abc12345 header {
background: #111222 !important;
}
#collection-def67890 header {
background: #ff8c00 !important;
}
Method 2: Use the Page Header Code Injection
This method is best if you don’t want to mess with Custom CSS for the whole site. You’ll add code to only the specific page you want to style.
Here’s how:
Go to Pages and click the gear icon next to the page you want to edit.
In the Page Settings popup, go to the Advanced tab.
Paste this code in the Page Header Code Injection box:
<style>
#header {
background: black;
}
</style>
You can change black to any color name or HEX code (like #333, #f5f5f5, etc.). If the change doesn’t show up, try adding !important; to the rule like this:
background: black !important;
This tells Squarespace to prioritize your style even if another rule is trying to override it.
Final Thoughts
Customizing your header color on a single page is totally doable. Plus, it’s good for clarity and contrast. Whether you use CSS with the Collection ID or the page’s Header Code Injection, you have the flexibility to fine-tune how your site looks on a page-by-page basis.
Go try it out for yourself!
Abby Castillo
Let’s Connect
Check out more step-by-step tutorials!
Subscribe to my YouTube channel @designwithabby for easy-to-follow Squarespace tips, design walkthroughs, and CSS learning.
Want more tips and inspiration?
Follow me on Instagram, Facebook, or LinkedIn for behind-the-scenes content, educational content, and design advice that actually helps.
Need a pro to handle your website?
Whether you're starting from scratch or need a refresh, I offer custom Squarespace design services to help your business stand out online. Get in touch here to book a free discovery call and see if we’re a good fit!
Or view my portfolio to see how I’ve helped others. :)
Frequently Asked Questions
-
Yes. Just add separate CSS rules for each Collection ID or use the Code Injection method on each individual page.
-
Yes, unless you specify otherwise with media queries. You can target desktop-only or mobile-only styles using @media rules.
-
Changing the header background color can override transparency. If you want to keep the adaptive effect, make sure your first section background complements your header design.
-
Absolutely. You can use the same targeting method to change other header styles like logo, navigation, or button colors using additional CSS rules.
-
Make sure you added !important to your CSS, double-check that the Collection ID is correct, and confirm there are no conflicting styles elsewhere on your site.
