How to Remove the Header + Footer from a Single Page in Squarespace

 
 

A lot of people use this code to turn a regular page into a landing page, giving you a bit more functionality than a regular cover page. In this tutorial I cover how to add this code to your entire site or to single out an individual page. I have a snippet for both the Beford theme family and the Brine theme family. If you have no idea what I mean by that, that's fine! Check out my Getting Started with CSS guide to get the low down on what that difference means for your code, and to see what this code looks like in action:, click the button below to be directed to the landing page I created:

Anywho, when you are ready, check out the video tutorial; the copy and paste codes are below. Have fun!

Bedford Family Templates

#header, #mobile.bar, #footer {
display: none !important;
}

Brine Family Templates

.Header, .Footer, .Mobile-bar{
     display:none !important;
     }

Adding This Code to One Page

Use "style brackets" in your "Header Page Code Injection", located on the advanced tab of the page menu.

Bedford Family Templates

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

Brine Family Templates

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

Yup - it’s that easy! All you need to do is center it between two html style brackets and the CSS will apply to that page only.

That’s all for today’s tutorial folks! I try to upload a new Squarespace tutorial every week. If you want to be notified when I post one, be sure to sign up for my email list below!