How to Remove the Header & Footer from a Single Page in Squarespace

Are you looking to create a landing page, sales page, opt-in page, 404 page or maybe a link in bio page for your Squarespace website?

Then you may want to remove the header and footer on that page to create a clean design and remove any distractions. For a sales or landing page, this can be an important step. Hiding the header and footer has been shown to increase conversions on a page up to 28%.

So, how do you hide them?

Unfortunately, with Squarespace there’s no built in way to remove the header and footer. So we have to turn to our old friend, the CSS code. With a little CSS it’s really easy to remove the header and footer from a single page of your Squarespace website.

*To use CSS you need to be on the Squarespace Business Plan or higher. You cannot use code on the Personal Plan.

I’m going to show you two ways to hide your head and footer on Squarespace 7.1. The first uses your Page Settings and the second uses the Custom CSS tool.

---

Remove Header & Footer Using your Squarespace Page Settings

This is the easiest way to remove the header and/or footer from a single page of your Squarespace website.

First you’ll need to navigate to your Page Settings

1. From the Home Menu click on Website

2. Hover over your page name and click the gear icon to reach your Page Settings

3. Click on Advanced

4. Copy and paste one of the following codes into the Page Header Code Injection window

5. Save

---

To remove both header and footer from your page add this code:

<style>header,footer{display:none}</style>

 To remove only the header from your page:

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

To remove only the footer from your page:

<style> footer {display:none} </style>

Remove Header & Footer Using the Custom CSS Tool

I know you might be wondering, if using the Page Settings is the easy way, then why do I even need to know another way?

That’s a great question. And, the answer is that sometimes the easy code just doesn’t work with your website. You may have another code in place that it disagrees with and it won’t work or it does something weird to your page.

This happened to me the last time I tried to remove just the header on a website. Suddenly, the colour of the footer was gone!

If this happens to you (or something else happens), don’t worry. Just remove the code from the Page Settings, hit save and move on to this solution.

Finding the Page Code

When we add code in the CSS tool it covers the entire website instead of a single page, so we’re going to have to specify which page we want. You could search through your page code to find this, but there’s a much easier way.

1. Download the Squarespace ID Finder Chrome Extension

2. Navigate to your selected page Home > Website

3. Click on the Chrome Extension icon (looks like a bunch of blocks)

4. Click on the code at the top of the page (in yellow) called “#collection-…” to copy

Add Code to Custom CSS Tool

1. From the Home Menu click on Website

2. Scroll to the bottom of the menu and click Website Tools

3. Choose Custom CSS

4. Paste your Collection ID in the window followed by one of the following codes

5. Save

---

To remove the header and footer from your page:

{header{display:none}
footer{display:none}}

To remove only the header from your page:

header{display:none}

To remove only the footer from your page:

footer{display:none}

You can also use this same method to remove the header and footer from multiple pages. The code would look like this:

---

#collection-id, #collection-id {header{display:none}
footer{display:none}}

Now you have the perfect landing page, sales page or opt-in page for your website!

---

Ready for a new website?

Let’s work together for a website that’s easy to use, maintain & update. Contact me or book an appointment to discuss!

Contact me