How to hide the header and footer on a Squarespace Page

---

On a sales page, the primary goal is to sell a product or service, so minimizing distractions for your website visitors is crucial. Hiding the header and footer on a sales page is a common practice for this reason.

Previously, Squarespace didn't offer a setting for this, requiring a custom code solution. Now, however, Squarespace has added this option directly in the settings page.

1. Go to Pages in the left menu

2. Click on the gear behind the relevant page. A small window opens.

3. Click on Navigation

4. Turn off the Header and/or Footer here (see image)

Disabling Header and Footer in Squarespace

You can disable the header and footer on the following types of pages:

• Normal pages in the Main Navigation and Not Linked sections

• Normal pages in Member Areas

• Pages in Courses

Currently, you cannot turn off the header and footer on these pages:

• Blog and blog posts

• Portfolio and portfolio items

• Events

• Shop and products

Hiding Header and Footer with Code

If you need to hide the header and/or footer on unsupported pages, you can use code. Follow these steps to add the code to the Page Header Code Injection of the relevant page:

1. Click on Pages in your left menu.

2. Click on the gear icon next to the relevant sales page. A small window will open.

3. Click on the Advanced tab. You can enter the code here.

<style>
  /* HIDE HEADER AND FOOTER */
  header, footer
  {display:none!important;
  }
</style>

If you are still working with 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>

Important Notes:

1. Check Mobile Compatibility: After adding the code, ensure it works on the mobile version of your site.

2. Additional Uses: You can also hide the header and footer on other pages, such as those for lead magnets, newsletters, or your custom 'link in bio' page for Instagram.

---

More Articles Like This: