How to Change the Header Style for One Page Only (Squarespace 7.1)
Want to be able to change the header color on a Squarespace page, but not the rest of your site? So, I’m going to run you through how you can do it with a simple little CSS hack. Perfect for adding visual interest, highlighting a sales page, or modifying a homepage look.
Why Change the Background Color of the Header for a Single Page?
By default, Squarespace uses one global header style across your site. But you want your header to be in your face in some cases (like on a:
Sales page or landing page
Portfolio section that is a real character.
Custom-branded promo page or event page
So instead of customizing the header per entire site, let’s add some CSS so that we can customize it on a single page.
Step-by-Step Instructions
Step 1: Find the Page’s Unique Identifier
Every page in Squarespace 7.1 has a data-page-id assigned to it. To find it:
Open your page in a browser (not within our site editor).
Right click anywhere on the page > Inspect or View Page Source.
Search (Ctrl + F or Cmd + F) for data-page-id=.
Copy the ID, something like data-page-id="5f879a0...").
Or you could use a Chrome extension such as Squarespace Collection/Block Identifier to get the ID easily.
Step 2: Add Custom CSS
Now we’ll apply custom styles to the header only when viewing that specific page.
Go to Design → Custom CSS, then paste the following code:
//For Adaptive & Gradient Header
#collection-68319fc7b979f8319ecbda2d .header {
background: #AECBF1 !important;
}
//For Solid Header
#collection-68319fc7b979f8319ecbda2d .header-background-solid {
background-color: #AECBF1 !important;
}
Replace "YOUR_PAGE_ID" with the actual ID you copied earlier.
You can change the background color to any HEX, RGB, or HSL color you like.
Example: Changing Header Color to White
[data-page-id="YOUR PAGE ID"]
.Header {
background-color: #ffffff !important;
}
This will change the header background to white, but only on that page.
Bonus Tips
Want to change the header text color, too? Add this:
[data-page-id="YOUR_PAGE_ID"] .Header-nav-item a {
color: #000000 !important;
}
Need to change the logo or hide elements? You can also target them with data-page-id just like this.
Final Thoughts
Creating a unique Squarespace header color for individual pages is an excellent way to make those pages stand out and add more personality to specific content. With this easy CSS trick, you can exercise more command without involving a developer.
Frequently Asked Questions (FAQ)
1. Is it possible to change the header background in Squarespace 7.1 for a specific page only?
Yes! Squarespace 7.1 uses a global header style by default, but I’ll show you a CSS hack that will allow you to change the header style (color, font, visibility, etc.) on just one page using the page’s data-page-id.
2. Where can I find the data-page-id for a Squarespace page?
You have two easy options:
Right-click on the live page anywhere and click Inspect (or View Page Source).
And in the popup, hit Ctrl + F (or Cmd + F on Mac) and look for data-page-id=.
Copy the value in its entirety, such as data-page-id="5f879a0c94f23e2abdb7c7a7".
Tip: You can also use the Chrome extension Squarespace Collection/Block Identifier to easily locate it.
3. Where do I add my custom CSS in Squarespace?
Go to your site’s admin:
Pull up that page in Customizer and go to Design → Custom CSS.
Paste the CSS code there
Remember, at this line where it says “YOUR_PAGE_ID” to replace that with the page ID of your actual page.
Example:
[data-page-id="5f879a0c94f23e2abdb7c7a7"] .Header {
background-color: #ffffff !important;
}
4. Can I change the header text or navigation link color on that page, too?
Absolutely. Just extend your CSS like this:
[data-page-id="YOUR_PAGE_ID"] .Header-nav-item a {
color: #000000 !important;
}
This will only affect the header links on that page, not the whole site.
5. Is it possible to hide or replace the logo for a single page?
Yes. You can use a similar approach:
[data-page-id="YOUR_PAGE_ID"] . Header-branding {
display: none !important;
}
Or replace it using background-image or inline HTML, depending on your logo setup.
