How to Hide the Header and Footer of Your Squarespace Website

If you’re an entrepreneur today, you know how important it is to have webinars and opt-in pages that convert! That’s why I love adding a little bit of code that will hide the headers and footers of my Squarespace websites so I can increase subscribers and make sales!

This tutorial is similar to How to Hide a Section on Squarespace and it’s just as easy!

Table of Contents Show

Why You Should Hide Header and Footers

Many people end up paying a third-party, like Lead Pages, to create these pages. These sites are are pricey and sometimes have a learning curve that wastes your time and money.

Creating your pages within Squarespace, gives you all the data and customization you need to learn and build better funnels for your business.

Types of Landing Pages Pages to Hide Headers and Footers

Here’s a list of pages that I would hide Headers & Footers

• Lead Magnet Pages

• Thank You Pages

• Custom Link In Bio Pages

• 404 Pages

• Unsubscribing

• Inquiry

• Sales Pages for eBooks, Courses, or any digital product

• Webinars

• Upsell Pages

How to Link a Button or Image to a ConvertKit Modal Pop Up in Squarespace

Hide Headers and Footers

Headers and Footers can be hidden on individual pages, Collection pages like Blogs Posts, Events, or Portfolio pages, or on the entire site. Here’s where you add the code to hide each of these page types or site.

Hide on Individual Pages or Collections

It’s really easy to remove the header and footer on specific pages on your site.

1. Page Settings

2. Advanced tab

3. Copythe 7.0 or 7.1 code from the next section

4. Paste the code into the text box > Click Save

Hide Headers & Footers on the Entire Site

I’m not sure why anyone would need to hide headers & footers on an entire site, but just in case you need to this is how you do it! Do not do this if you need to hide for individual pages.

1. From the Main Menu

2. Design

3. CSS

4. Copy the 7.0 or 7.1 code from the next section

5. Paste the code into the text box > Click Save

How to Create a Squarespace Blog Template

Code to hide headers and footers on Squarespace

Code to Hide Headers & Footers on Squarespace 7.0

To Hide the Header

<style type="text/css">
  .header-inner {
    display: none!important;
  }
</style>

To Hide the Footer

<style type="text/css">
.footer
 {
   display: none!important;
} 
</style>

To hide the announcement bar

<style type="text/css">
.tweak-mobile-bar-top-fixed .Mobile-bar--top,
.sqs-announcement-bar-custom-location {
   display: none!important;
} 
</style>

To hide the Header, Footer, and announcement bar

<style type="text/css">
.Header-inner, 
.Footer,
.tweak-mobile-bar-top-fixed .Mobile-bar--top,
.sqs-announcement-bar-custom-location {
   display: none!important;
} 
</style>

How to Hide a Section on Squarespace

Code to hide headers and footers on Squarespace 7.1

Hide the Header

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

Hide the Footer

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

Hide the Header & Footer

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

Here’s a before and after 👇

View fullsize

Before

View fullsize

After

Troubleshooting Hiding Headers & Footers

There’s a few reasons why the code worn’t work.

You have conflicting code somewhere on your site

Scour your site until you find where the code has gone wrong.

• Check the advanced code on individual pages

• Check code in the Header & Footer Injections

• Check the the site wide code in Custom CSS

You might need to copy all the code, and add each piece until you see the error occurs again.

Squarespace is making updates and is preventing the code to work.

But for option two, just wait it out and it should be back eventually.

---

There you have it! A very simple hack that will keep people on your site and that will convert your audience when you’re trying to grow your business while saving money!

I also use this hack to create my own email optin pages so I can send my subscribers my freebies! If you want to learn how to send your lead magnet with ConvertKit check out this helpful tutorial!

Leave a comment down below and let me know if this was helpful

Squarespace Post You Might Like

• How to Add Share Buttons to Squarespace 7.1 Blog

• How to Link a Button or Image to a ConvertKit Modal Popup in Squarespace

• How To Create A 'Link In Bio' Page In Squarespace

---

Are You On Pinterest?

If you enjoyed this post please share it, thanks!