How to Remove the Header and Footer in Squarespace

Squarespace is a popular website builder that allows users to create beautiful, customized websites without the need for coding or technical expertise.

By default, it has a header and footer design that you can customize and style to your liking. But sometimes when you are creating a landing page, sales page or a single-page website the header and footer can be irrelevant.

In these cases, you may want to remove the header and footer in Squarespace to create a more streamlined look. In this post, we'll walk you through the steps to remove the header and footer from a Squarespace site.

Step 1: Log in to Your Squarespace Account

The first step is to log in to your Squarespace account and navigate to the website you want to remove the header/footer from. In the website dashboard, click on the Website menu item.

Step 2: Access Website Tools

Now, click the Website Tools option under the Utilities category.

Step 3: Access the Custom CSS

Click on the Custom CSS option in the website tools section.

Step 4: Add Custom CSS

To remove the header and footer, you'll need to add some custom CSS to the website. In the custom CSS field text box add the following custom CSS code.

i) This code will remove both the header and footer from the site.

#header, #footer-sections { 
    display: none;
}

ii) This code will remove only the header from the site.

#header { 
display: none;
}

iii) This code will remove only the footer from the site.

#footer-sections { 
display: none;
}

Step 5: Save and Publish

Once you've added the custom CSS code, click on the Save button at the top left corner of the page to save and publish your changes.

Removing the header and footer from a Squarespace page can create a more streamlined and focused look for your website. With just a few simple steps, you can remove these elements and create the customized look you want for your Squarespace page. So why not give it a try and see how it works?