How to hide the Header and Footer on Squarespace 7.1
In this tutorial, you will learn how to hide the header and footer on your Squarespace 7.1 site. This code specifically applies to Squarespace 7.1 version only. There are several reasons why you may want to hide the header and footer, such as creating an effective landing page to optimize conversions without relying on external programs like LeadPages or OptinMonster, or when designing sales, opt-in, and thank you pages to keep the visitor's attention focused on the current page without distractions. By following the steps provided in this tutorial, you'll be able to seamlessly hide the header and footer sections on your Squarespace 7.1 site and create a more streamlined and engaging user experience.
Complexity: Easy
To hide your Header and Footer, simply copy the code below:
From your Squarespace account, go to the Custom CSS Editor. paste the code into the Custom CSS editor box. This code will work site wide.
If you wish to hide the header and footer from a particular page, you will need to view the page source by simply right mouse click and click on the 'View page Source' option. Look for the body tag which would look something like this: <body id=”collection-5f0748fced03a8025828eee7 (see image below).
Copy the ID (collection-5f0748fced03a8025828eee7).
Every page gets a unique ID added to its opening body tag. This is really handy for targeting a single page with CSS.
The code below is what you will use to hide the Header and Footer on a particular page.
This now becomes
For the mobile section use the following code below: This code will remove the entire mobile menu.
From your Squarespace account, go to the Custom CSS Editor. paste the code into the Custom CSS editor box.