How to Remove the Header & Footer on Squarespace & Why
The two ways you can remove the Header & Footer in Squarespace on a page and why you would do this.
I’ve been asked this one by several people this will step you through the exact steps on how to remove the header and footer. I’ll then explain why you might want to do this.
This tutorial is for Squarespace 7.0 Brine templates and Squarespace 7.1 sites. If you’re not sure how to find out what template you are one watch the video till the end or go to the end of this post for details.
Watch the video how to remove the header and footer on your Squarespace Website
How to remove Header & Footer in Squarespace.
This video will walk you through the 2 different ways you can remove your Header and Footer from a page in Squarespace.
The demo sight used for the article and the video is Natasha Fett DPT she is a Physical Therapist and Pilates instructor that I’ve been working with on reworking her site.
Option 1 to remove Header & Footer:
Adding Custom Code using code injection
You must be on a business or commerce plan to use this option
Step 1: You are going to navigate to your pages section in your menu tree
Step 2: You are going to go to the page you want to remove the header and footer from.
Step 3: Click on the gear icon when you hover over the page you would like to remove the header and footer from. When you click on this it will pop open a window
Step 4: Once the window with page setting opens up you are going to navigate to the advanced section. Don’t worry nothing crazy is going to happen!
Step 5: This is where things get fun and the magic happens. Now you will paste the following code into this section. After the code is pasted in hit the save button
Code for Squarespace 7.0 Brine Template
You want to copy this section right here and paste it into the section that reads Page Header Code Injection!
<style>
.Header, .Mobile-bar {display: none !important;}
.Footer {display: none !important;}
</style>
If you are using Squarespace 7.1 this is the code to remove the header and footer
<style>.header, #footer-sections {display:none!important}</style>
Step 6:
As long as you hit save you’re all done! You now have a page that has the header and footer removed. Keep scrolling down to the bottom for important notes and why you might want to remove the header and footer
Option 2: For removing the header and footer on your Squarespace site.
This option is for personal plans. I wouldn’t recommend doing this if you have a business plan.
In this application, we will be using the same exact code but placing it directly on your page. The reason I wouldn’t recommend doing this if you don’t have to is that sometimes we can forget where we’ve placed custom code or if someone else starts working on your site it might be hard to find.
If you are on a personal Squarespace plan this is how you would add custom code to your site.
Adding Custom Code on page
This is going to be for personal plans
Step 1: You are going to navigate to your pages section hit the edit button on that page
Step 2: Now select the + icon that allows you to add an element. Technically you could add this anywhere on the page, but to keep things neat and organized having it at the top of the page is nice.
Step 3: Select the code element. When you select this is will automatically have a piece of sample code <style> hello world <style>
Step 4: Paste the code below in the spot where the sample code was located (that will be removed) You want to keep the settings as they are
Code for Squarespace 7.0 Brine Template
You want to copy this section right here and paste it into the section that reads Page Header Code Injection!
<style>
.Header, .Mobile-bar {display: none !important;}
.Footer {display: none !important;}
</style>
If you are using Squarespace 7.1 this is the code to remove the header and footer
<style>.header, #footer-sections {display:none!important}</style>
Step 5: Hit the save button in the top left you will now have a page that has no header or footer
Tips on styling your page after you’ve removed the header and footer
Many times this is one thing that people overlook. Now that you have removed your header and footer there might be nothing to identify whose website you are on. Many times the header and footer have your logo, locations, etc.
Here are a few things you can do to make sure people know who you are.
Add your logo back in at the top of your page
Use H1 to identify who you are who you serve.
This example uses my own Instagram link
Next, why do you want to or should you remove the header/footer on certain pages.
There are two primary reasons you might want to remove your header and footer.
You want to use your own domain & site for your link in bio
You want to create a Landing Page (aka Sales Page)
I’ll break down the detail of both for you below.
Why would you want your own Linkin bio page?
You want to track analytics to your page and since you’re already paying for your website you don’t want to pay for an additional software
You want your branding to match. While things like Linktree and other services like this work great. Unless you have their paid versions you are limited on what analytics and styling are available.
I’m sure there are other reasons these are the primary ones.
Why do you want to remove the header and footer for a landing page?
This one is near and dear to me. I’ll give you all the reasons and explain a bit why you can do this on your own!
You’re landing page’s primary purpose is to either sell a specific item or get someone’s contact info. You don’t want a potential customer going around exploring other parts of your site.
If you use your own site with your registered domain and remove the header and footer they will know it’s not some crazy spam site. How many times have you clicked on an ad and then you’re brought to a site that’s domain does not match the company you thought it was and then clicked away from it.
Why would you pay extra money for an extra special landing page software when you can already use what you have. Yes, those landing page softwares’ can cost some extra money each month. Some as much as $200 per month (That’s more than an entire year of Squarespace)
When your site is designed on Squarespace with just a little snippet of simple code you can have a beautifully styled landing page that matches the rest of your site without much extra work and ZERO extra cash.
Why is this so dear to me?
Many years ago when my husband and I owned our fitness studio we were working with a mentor who was helping us create Facebook ads and sales funnels for new leads. They insisted that we had to sign up for Click Funnels and that was the only way we could run a Facebook ad and create landing pages. Well, that was $197 a month plus the cost of our Facebook ads, plus learning entirely new software. I’m ashamed to admit we paid that for 6 months a total of almost $1200 that could have gone to our profit.
A couple of things about me that are my core values.
I’m crazy thrifty, frugal, cheap whatever you want to call it (I say responsible with our funds) that ran into our business.
I can not stand being wasteful or spending just because.
This was my gateway into really loving Squarespace sites and understanding what it’s capable of.
I realized I wasn’t running a crazy funnel of any kind. We just wanted people to enter their names, email addresses and then book a free consultation with us. With that tiny bit of code, I showed you above I was able to create almost the same-looking landing pages and get the same results saving us some cash.
Looking for a bit of help on what to put on your home page?
Download my Free Workbook
With my Top 3 Homepage recommendations
Hi I’m Sara
While I’m not working on helping awesome people with their website and automation you can find me outdoors in Utah or teaching Pilates and Fitness classes.
Would you like to chat about designing or updating your fabulous Squarespace website?
You can schedule your Free Consultation below
* As I had promised how do you find out what template you’re on.
Navigate to your main tree
Select Help
At the very bottom on the left, it will tell you what version of and template of Squarespace you are using
