How to hide the Header and Footer on Squarespace 7.1

Squarespace 7.1Tutorials
Written By Primitus Consultancy

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:

// Hide Header and Footer //
.header, #footer-sections {display:none !important;}

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).

How_to_hide_the_Header_and_Footer_on_Squarespace_7_1--body.png

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. 

// Hide Header and Footer //
#collection-[ID]{
   .header, #footer-sections {display:none !important;}
}

This now becomes 

// Hide Header and Footer //
#collection-5f0748fced03a8025828eee7{
   .header, #footer-sections {display:none !important;}
}

For the mobile section use the following code below: This code will remove the entire mobile menu.

@media screen and (max-width:767px) {
  /* hide burger */
  .burger-box {
    visibility: hidden;
}
  /* hide footer */
  footer.sections {
    display: none !important;
}
 .burger {
   display: none !important;}
}

From your Squarespace account, go to the Custom CSS Editor. paste the code into the Custom CSS editor box.

Featured
side-bar-logo.png
Plugins-Button.jpg
Templates-Button.jpg
SEO-Button.jpg
11help-Button.jpg
 
Home Blog
Primitus Consultancy

We work with small and medium-sized businesses to help create a professional online presence. We provide a one shop full-service design studio in London, United Kingdom. 

https://primitusconsultancy.co.uk
Previous

How to change mobile menu hamburger Colour on Squarespace 7.1
Next

How to Embed a YouTube or Vimeo Video that autoplays and loops on Squarespace