How to Hide Your Header and Footer On Your Squarespace Website
One of the key parts of creating a sales page is often having the ability to hide your header and footer on your website.
This allows your customers to focus SOLELY on your sales offering and not get distracted by other pages on your website.
But here’s the problem - Squarespace doesn’t just have an “easy click” button to remove your header and footer on one page on your website - so how in the world can you remove your header and footer on your sales page on your Squarespace website???
The good news is, all you need is a TINY bit of easy code - that you can literally copy and paste in 5 seconds - and you’ll have the header and footer disappear from that page instantly!
Keep reading below for the code you need!
Don’t feel like reading? Then watch the Youtube video below, where I demo exactly what you need to do in this post in video format!
Remove Your Header and Footer - 7.1 Version
First, you are going to head over to the page that you want to edit. Click the Settings Icons -> Advance -> Page Header Code Injection to get some custom code added.
Note: Make sure to start a new line if you already have code in this section.
Next, you are going to paste the code below that works best for your needs:
<!-- Remove Your Entire Header and Footer (7.1) -->
<style>
#header, #footer-sections {
display: none;
}
</style>
<!-- Remove Your Entire Header and Footer but Keep Logo (7.1) -->
<style>
.header-burger, .header-burger-btn, .header-nav, .header-actions, #footer-sections {
display: none;
}
</style>
<!-- Remove Your Entire Header Only (7.1) -->
<style>
#header {
display: none;
}
</style>
<!-- Remove Your Entire Header Only But Keep Logo (7.1) -->
<style>
.header-burger, .header-burger-btn, .header-nav, .header-actions {
display: none;
}
</style>
<!-- Remove Your Footer Only (7.1) -->
<style>
#footer-sections {
display: none;
}
</style>
Remove Your Header and Footer - 7.0 Version
First, you are going to head over to the page that you want to edit. Click the Settings Icons -> Advance -> Page Header Code Injection to get some custom code added.
Note: Make sure to start a new line if you already have code in this section.
Next, you are going to paste the code below that works best for your needs:
<!-- Remove Your Entire Header and Footer (7.0) -->
<style>
.Header, .Footer, .Mobile {
display: none !important;
}
</style>
<!-- Remove Your Entire Header and Footer but Keep Logo (7.0) -->
<style>
.Header-nav, .Cart, .Footer, .Mobile-bar-menu {
display: none !important;
}
</style>
<!-- Remove Your Entire Header Only (7.0) -->
<style>
.Header, .Mobile {
display: none !important;
}
</style>
<!-- Remove Your Entire Header Only but Keep Logo (7.0) -->
<style>
.Header-nav, .Cart, .Mobile-bar-menu {
display: none !important;
}
</style>
<!-- Remove Your Footer Only (7.0) -->
<style>
.Footer {
display: none !important;
}
</style>And that’s all! Super simple to add, and you’ve got the perfect setup for your Squarespace website sales page to be successful with no header or footer!
