How to Hide the Header + Footer Navigation on Squarespace (only on specific pages!)

UPDATE! You can now remove the header or footer natively through Squarespace. Simply click the gear icon next to the page you would like to edit, click Navigation, and then toggle on or off Show Header or Show Footer.

While your header and footer navigation is super helpful and convenient for website visitors to click through to various spots on your website, sometimes you would like to create a standalone page without these options.

Creating a page that hides your header and footer navigation is great for long-form sales pages, dedicated lead magnet signup pages and so much more. Through Squarespace and a little custom code, you don’t have to pay for third-party services like LeadPages or Clickfunnels for your business needs.

Plus, having the ability to use custom fonts, colors and more with ease is a huge bonus of utilizing this route for a landing page for your latest offering. Review the steps below to learn how to achieve this look on your site!

To remove the header and footer on a specific page of your site, access the Page settings of the page you do NOT want the header or footer to display.

Select the Advanced tab within the Page Settings and In this section of the page settings, insert the following code into the text box:

Code For Squarespace 7.0

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

Code for Squarespace 7.1

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

After selecting Save, the header and footer will no longer display on that page.

Check out an example of how we use this snippet of code on our website below.

Before

After

You no longer have to pay those extra costs to other programs or software to promote your course, share that new freebie and more! This is also a great way to create “Cover Page” -style pages without being constrained to the limited options available to those types of pages, such as the inability to add custom code or form embeds.

Hopefully this tutorial was helpful for you to hide your header and footer navigation on specific pages on Squarespace. If you’ve used this technique on your website, be sure to share the URL in the comments below so we can check it out!