Looking to remove the header and footer from just one page of your Squarespace website? Well, you’ve landed in the right place my friend. Whether you are on Squarespace 7.0 or 7.1, this simple, two-step tutorial will work for you.

There are several reasons why you might want to hide the header and footer from just one page of your website. No matter your reason, this post has you covered. I’ll show you how to add a small bit of custom CSS code to your Squarespace website to remove the header and footer on both desktop and mobile views.

Reasons to Remove the Header and Footer from One Page on Squarespace

Okay, so why would you want to remove the navigation from just one of your web pages? Here are a few of the most common reasons:

Opt-in page 

Yay! You got someone interested in one of your free offers, and you want to make sure they follow through and subscribe to your email list. Hiding the navigation options means they will either subscribe to your list, or it will force them to use the back button to return to the other content on your website.

Sales page

Same idea here. You’ve successfully brought someone to your sales page, with the one goal of selling your offer. The last thing you want is for your visitor to get distracted by other content on your website.

Now, it is not always the best idea to hide the navigation for a sales page, but it could be. Hiding the navigation for an opt-in page or a sales page has the same reasoning behind it. Less distractions means the only way to continue is either to move forward or back, there are no lateral moves here. 

However, if you have several similar offers, and need your visitor to be able to select the right offer for them, you may not want to remove those navigation options.

Client testimonial form

Getting a glowing testimonial comes with a number of challenges. For this reason, I keep my client feedback form super-duper simple by removing the header and footer. This also allows me to easily keep the form on my own website without using a 3rd-party tool.

Just to recap, when you have just one goal you want your user to complete, you may want to consider removing the header and footer from that single page of your website.

Okay, so now you know the reason WHY.
Let’s get into the HOW.

How to Remove the Header and Footer from One Page on Squarespace

Step One

In the pages menu on both Squarespace 7.0 and 7.1, click on the gear icon for the page you want to hide the header and footer on to navigate to the settings menu. 

Step Two

Next, navigate to the advanced tab and paste the following code into the “page header code injection” window. 

Choose the correct CSS code below for either Squarespace 7.0 or 7.1. 

7.0

<style>
.Header, .Footer, .Mobile-bar {
display:none !important;
}
</style>

7.1

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

Please note that using the header code injection is a premium feature, so you will need a business or commerce plan to use this feature.

If you are on a personal plan and need to hide the header and footer from a single page, you can add the CSS code directly on the page using a code block instead. Simply insert a code block and copy and paste the appropriate code for your version of Squarespace.

There you have it. Two steps. So simple.

Did this post help you? Or do you still have questions? Please leave a comment and let me know! I’m always happy to hear from you!

Need help creating a stunning and custom Squarespace website for your mindful business? I’d love to work with you! Check out my Custom Website service to get started.

If you enjoyed this post, please help me out by pinning it to Pinterest or sharing it on social media. :)

Don’t take off without snagging a copy of my Free Website Goals + Nav Workbook. This workbook will help you set clear goals for your website and navigation that will help you convert your site’s users into paying customers and clients!