How Do I Make the Header Different on Each Page Squarespace?
Making the header different on each page in Squarespace can be achieved using Custom CSS and, optionally, JavaScript or Code Injection. Here's a step-by-step guide:
1. Identify the Page's Unique Collection ID
Each page in Squarespace has a unique Collection ID, which is essential for targeting page-specific styles.
How to Find the Collection ID:
Open the page in your browser.
Right-click anywhere on the page and select Inspect or View Page Source.
Look for a line like this:
<body id="collection-XXXXXX">The value
collection-XXXXXXis the unique ID for that page.
2. Write Page-Specific CSS
You can use the Collection ID to apply custom styles only to specific pages.
Example: Change Header Background for One Page
/* Apply a solid header background on a specific page */ body#collection-XXXXXX header.Header { background-color: #000; /* Black background */ } /* Change navigation text color for that page */ body#collection-XXXXXX header.Header .header-nav-item a { color: #fff; /* White text */ }
3. Add the Code to Squarespace
Depending on your plan, you can add the CSS in different locations.
If You Have Site-Wide CSS Access:
Go to Design > Custom CSS.
Paste the code.
Save.
If You Have Per-Page Code Injection:
Go to Pages, click the gear icon for the specific page, and open the Advanced tab.
Paste the code inside the Page Header Code Injection field.
Save.
4. Modify Header Content (Logo, Navigation Links, Buttons)
If you want to go beyond styling and modify the header content (like the logo or navigation items), you’ll need JavaScript or JQuery.
Example: Change the Logo for One Page
<script> document.addEventListener('DOMContentLoaded', function() { if (document.body.id === 'collection-XXXXXX') { document.querySelector('.header-title-logo img').src = '/path-to-new-logo.png'; } }); </script>
5. Add/Hide Navigation Items for Certain Pages
You can hide or show navigation links for specific pages.
Example: Hide Specific Navigation Links
/* Hide the third navigation link on a specific page */ body#collection-XXXXXX .header-nav-item:nth-child(3) { display: none; }
6. Completely Remove the Header on One Page
If you want to remove the header entirely on a specific page:
/* Hide the header on a specific page */ body#collection-XXXXXX header.Header { display: none; }
7. Advanced Customization for Multi-Language Sites
If you have a multi-language site, you can set different headers based on URL subdirectories (like /en or /de).
Example:
<script> document.addEventListener('DOMContentLoaded', function() { const pathname = window.location.pathname; if (pathname.includes('/en')) { document.querySelector('.header-title-logo img').src = '/logo-en.png'; } else if (pathname.includes('/de')) { document.querySelector('.header-title-logo img').src = '/logo-de.png'; } }); </script>
8. Test and Debug
Refresh your site to confirm the changes are applied correctly.
Use your browser's Inspect Tool to check if the custom styles or scripts are targeting the right elements.
9. Tools to Simplify the Process
Use Squarespace Collection/Block Identifier (Chrome Extension) to easily find collection IDs.
Squarespace's Developer Mode (for advanced users) allows more control over your site's layout and header structure.
By combining CSS and optional JavaScript, you can fully customize the header for each page in Squarespace. Let me know if you’d like help implementing a specific customization!