by Crawford | Squarespace Web Designer

View Original

Squarespace tutorial | Hiding headers on specific pages

If you’ve got a page on your website where you don’t want to display the header, e.g. a blog or sales page, then you need to know how to hide a header on specific Squarespace pages, whilst keeping it live on others.

Luckily for you that’s exactly what I’m taking you through in today’s Squarespace guide.

To hide a header on a simple page you need to first navigate to pages and select the page you want to edit.

Clicking on the cog will take you to the settings of that page where you need to navigate to advanced settings.

Watch the video

Check out the YouTube video below 👇

Within the page itself you then need to add the following code to hide the header on that page:

<style>
#header {
display: none
}
</style>

Click save and the header for your chosen page will disappear.

To inject code into pages like this however you will need to be on a business plan or higher.

Don’t worry, if you’re on a personal plan you can still remove a header from a specific page, you just need to input the code into the custom CSS of your website instead.

Don’t forget, if you’re hiding the header this way you’ll need to get the page’s collection ID first to add to your custom CSS panel.


📩 Join the inner circle to get exclusive code updates

See this form in the original post

The best way to find the collection ID of the page is by downloading the Chrome extension, Squarespace Block Identifier. Check out this guide to learn more about finding a block ID on Squarespace.

Once you’ve found the collection ID for the page, copy and paste it into the custom CSS panel along with the code:

#header {
display:none
}

So with your collection ID, it would look something along the lines of

#COLLECTION-ID {

#header {
display:none
}

}

Click save and your header will be removed.

Being able to remove headers from specific pages on Squarespace is a handy trick to have up your sleeve. Headers are great and provide an array of benefits but you don’t always want them to display on every page. 


Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

See this social icon list in the original post

Want more?

See this content in the original post