How to Hide the Header and Footer on Your Squarespace Sales Page
On a sales page, you’re selling a product or service. That’s where all the focus lies, which is why you want to minimize distractions for your website visitors as much as possible. Hiding the header and footer on a sales page is therefore common practice.
Previously, there was no setting for this in Squarespace, and you had to do this using a bit of code. Squarespace has since added this option to the page settings.
In the left-hand menu, go to Pages
Click the gear icon next to the relevant page. A small window will open.
Click on Navigation
Disable the header and/or footer here (see image)
You can only disable the header and footer on the following pages:
Regular pages in the Main Navigation and Not Linked sections
Regular pages in Member Areas
Pages in Courses
On these pages, it is not (yet) possible to hide the header and footer in this way:
blog and blog posts
portfolio and portfolio items
events
Shop and Products
You can also hide the header and/or footer using code. Paste the code below into the Page Header Code Injection section of the relevant page:
In the left-hand menu, click on "Pages"
Click the gear icon behind the relevant sales page. A small window will open.
Click the "Advanced" tab. You can enter the code here.
<style>
/* HIDE HEADER AND FOOTER */
header, footer
{
display:none!important;
}
</style>
If you're still using Squarespace 7.0, you can use the following code. (Brine templates)
<style>
/* HIDE HEADER AND FOOTER */
header, footer {
display: none !important;
}
/* REMOVE MOBILE HEADER */
.Mobile-bar {
display: none !important;
}
/* REMOVE ANNOUNCEMENT BAR */
.sqs-announcement-bar {
display: none !important;
}
</style>
Note 1: After adding the code, be sure to check that it works on the mobile version of your site, just to be safe.
Note 2: You can hide the header and footer not only on sales pages, but also on your freebie page, newsletter page, or your custom “link in bio” page for Instagram.
