Hide Header and Footer From a Squarespace Page (Code-Free!)

The header and footer on your pages make it easy for visitors to navigate around your website and see what you have to offer.

However, there will be circumstances in Squarespace where you need to remove the header and footer from one single page.

For example, you might want to:

• Create a landing page or pricing page with minimal links to encourage potential customers to stay on the page and convert

• Tell a story and hide the header and footer to provide a more immersive experience

• Embed a video or game and not want the header or footer to interfere with the content

The good news is that it’s easy to hide your header or footer (or both) on Squarespace.

Here’s how to hide a header and footer on Squarespace 7.1 in two ways — with and without the use of custom code.

Option 1: Hide header or footer without custom code

Squarespace released this way of hiding headers and footers from a page in March 2024. You don’t need to use code and you can toggle your headers and footers off and on in less than a minute!

Click Website and find the page you want to amend. Click the Cog icon to enter page settings.

Go to Navigation. In this section you’ll find two options: Show Header and Show Footer. These are turned on by default, but click the toggle to turn them off.

Click Close when you’re done. Preview your page and your header and/or footer will have vanished!

Option 2: Hide header or footer with custom code

Before Squarespace released the code-free way to hide a header or footer on a page, you had to use custom code. While option 1 is far easier, you may prefer this method — it’s all about personal preference!

Squarespace: hide header from one page

We’re going to use the code injection feature, which we’ve looked at in previous articles. However, rather than adding the code to the whole site, we’re going to add it to one specific page.

To do this, go to the Squarespace page you want to remove the header from. Click on the cog to access page settings and click on Advanced.

Paste the following code into the code injection box:

<style> 
.header { 
  display: none;
} 
</style>

Close the box and preview your page. The header at the top of the page should have disappeared entirely.

Squarespace: hide footer from one page

The process for removing the footer from your Squarespace page is exactly the same; it’s just that the code is slightly different.

Go to the Squarespace page you want to remove the footer from. Click on the cog to access page settings and click on Advanced.

Paste the following code into the code injection box:

<style> 
#footer-sections { 
  display: none;
} 
</style>

Close the box and preview your page to make sure the footer has disappeared.

Squarespace: hide header and footer

While you can use both pieces of code mentioned above on the same page, it’s best to keep your code as concise as possible. This means your page runs faster and makes it easier to amend if something goes wrong.

If you want to hide a header and footer from one page, use this code in the Advanced settings:

<style> 
#header, #footer-sections { 
  display: none;
} 
</style>

Close the box, preview your page, and you’re good to go!

Want to unhide your header or footer?

Just repeat the steps above in reverse!

Go to the Squarespace page, click on the cog to access page settings and click on Advanced.

Delete the relevant code, close the box, and that’s all there is to it.

Want to remove your header and footer from your whole site?

It can be done. Just go to Website > Website Tools (scroll down) > Code Injection. Paste the code you want to use into the box, and click Save.

However, just because you can doesn’t mean that you should.

While it’s handy to be able to hide your header and footer on one page, hiding it on all of them can make it hard for your website visitors to find their way around your site!

You don’t want potential customers to get frustrated.

Some things to bear in mind when hiding headers and footers with custom code

While hiding the header or footer on one page in Squarespace using code only takes five minutes, there are a few things to remember:

• Code injection is only available in business plans and above. It’s not available if you have a personal plan

• Some pages don’t support code injection, including checkout pages and email confirmation pages

• If you copy a page that you’ve hidden a header or footer on, the changes will apply to that page too

• While adding custom code to Squarespace is safe, it falls outside the scope of Squarespace’s support. This means that Squarespace can’t help if you have any questions or concerns about the custom code on your site

So there you have it… you now know how to hide your header and footer on Squarespace 7.1 in two different ways. Have fun customizing your pages!

Want to know more about how to get the most out of your Squarespace website? Check out the Spark Plugin blog for more handy hints and tips.