Hide the Header and Footer on a Single Page in Squarespace

In this tutorial I show you how to hide the header and footer of your Squarespace site on any one page. Perfect for when you are creating sales pages, opt-in pages and thank you pages and want to keep the visitor’s attention without them navigating away from the current page.

Hide the Header + Footer on Squarespace

 

Don’t want to watch the video? All the steps are broken out below!

Step 1: Identify the collection ID of the page you want to hide the header and footer on

When viewing your website in Chrome, right click on the page and click inspect.

You will see all of the html for that page. Scroll up until you see the opening body tag.

The body tag will look something like this: <body id=”collection-5b9fdeae8a922d1b3d0a0452

body collection id in Squarespace

Copy the ID (collection-5b9fdeae8a922d1b3d0a0452).

Every page gets a unique ID added to its opening body tag. This is really handy for targeting a single page with CSS.

Go to your custom CSS window and type in a hashtag symbol (#) then paste in your page’s collection ID and open up some curly brackets.

The hashtag symbol is used to target ID’s in CSS.

Your custom CSS window should now look like the screenshot below:

collection id in the Squarespace custom css window

Step 2: Identify the Header and Footer tags

Hovering over the header, right click and click inspect.

In the Brine template, there are two header areas, the Top Header and the Bottom Header (highlighted in the picture below).

top header and bottom header in Squarespace

You will notice that both header areas have an element type of header (<header>) which we can use to set both header areas to a display of none.

In your chrome inspect window, you can also scroll down to the footer and see that it has an element type of footer (<footer>) which we can also use to set the footer to a display of none.

Squarespace Footer tag

Step 3: Hide the Header and Footer

Back in your custom CSS window, between the collection ID curly brackets, type out the following:

header, footer {
  display: none!important;
}

We use the !important tag to make sure that the custom CSS we write overrides the default styling already applied to the header and footer by Squarespace.

And that is it! You have now hidden the header and footer on a single page in Squarespace. Your final CSS should look like this:

#collection-5b9fdeae8a922d1b3d0a0452 {
  header, footer {
    display: none!important;
  }
}

If you have several pages that you would like to hide the header and footer on, simply find the collection ID’s for the other pages and separate them with a comma like so:

#collection-5b9fdeae8a922d1b3d0a0452, #collection-5b9fdeae8a922d1b3d0a025d  {
  header, footer {
    display: none!important;
  }
}

This is the best method for hiding the header and footer on a single page in Squarespace because you are able to keep all of your CSS in one place and it also works on every Squarespace hosting plan.

If you have any questions or need help implementing this on your site, please feel free to shoot me an email or leave me a comment on YouTube.

Cheers!
Chris