How to hide the header and footer on one page of your Squarespace Website

A client got in touch with me the other day in a panic…

“I accidentally deleted the footer on my website!! I meant to do it on just one page, but it’s gone from everywhere - help!!!”

Happily I had a site back-up (top tip - make one for every site you create by duplicating the site on Squarespace) & updated her footer for her in minutes… but… it’s worth knowing that changes made to your header or footer on one page of your Squarespace site apply to all pages (so don’t go deleting things!!)

But what do you do if you want to have a header & footer-less page, but you don’t want that to be the case everywhere?

Well that’s where these code snippets come in!

But first why might you want to hide the header & footer on a page on your site?

I do this often on links pages, landing pages, privacy and cookie policies and 404 pages. Anywhere where I don’t want the visitor experience to be cluttered or confused with extra options. 

---

Hide the header on one page of your Squarespace site

For this hide the header CSS snippet we’re going to add the code into the page code injection (only available with Squarespace business plans and higher). We find this by going to the page we want to apply the code to. Clicking the Page settings button and navigating to Advanced.

As this panel can accept all types of code, not just CSS we need to be sure to wrap our CSS snippet in the <style></style> tags to tell Squarespace that what we’re writing is CSS and not any other type of code or markup.

CSS to hide header on Squarespace 7.1

<! ––HIDE HEADER––>

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

Hide the footer on one page on Squarespace

Similarly to hiding the header I hide the footer on squarespace websites often for landing pages, privacy and cookie policies and 404 pages. Once again, anywhere where I don’t want the visitor experience to be cluttered or confused with extra options. 

Just like for hiding the header, to hide the footer on your Squarespace website with this CSS snippet we’re going to add the code into the page code injection (only available with Squarespace business plans and higher). We find this by going to the page where we want to apply the code, clicking the Page settings button (the gear icon) and navigating to Advanced.

As this panel can accept all types of code, not just CSS we need to be sure to wrap our CSS snippet in the <style></style> tags to tell Squarespace that what we’re writing is CSS and not any other type of code or markup.

CSS to hide footer on Squarespace 7.1

<! ––HIDE FOOTER––>

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

---

Less of a DIYer and want someone to do it for you?

You can grab a power hour with me to solve all your Squarespace niggles so your can concentrate on the things that’ll really move the needle in your biz

---

New on the ‘Gram…