How to hide the Header and Footer on Squarespace 7.1
If you're building a landing page, a coming soon page, or simply want a distraction-free layout in Squarespace 7.1, hiding the site header and footer can help you achieve a cleaner, more focused design. Squarespace doesn’t offer a built-in toggle to remove these elements on individual pages, but with a simple line of custom CSS and the page’s Collection ID, you can easily hide both header and footer on any page.
This tutorial will walk you through the steps to do it safely and quickly.
Table of Contents
Why Hide the Header and Footer in Squarespace?
There are many good reasons to remove the header and footer on specific pages of your Squarespace 7.1 website — especially when building high-converting, minimal, or focused experiences:
Boost Conversions: Reduce distractions by removing the main navigation and footer links so visitors focus only on your offer or CTA.
Cleaner Design: Great for minimalist styles or single-goal landing pages.
Create Custom Layouts: Build unique pages like thank-you pages, opt-in forms, or limited-time campaign pages.
Avoid Third-Party Tools: No need for tools like LeadPages or Unbounce — do it all within Squarespace.
Complexity: Easy
How to Hide the Header and Footer (Step-by-Step)
Step 1: To hide your Header and Footer, simply copy the code below:
// Hide Header and Footer // .header, #footer-sections {display:none !important;}
From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code. 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, therefore, 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.
// 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 the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code
Step 2: This a newer option recently added by Squarespace.
Navigate to the Page - Go to the page where you want to hide the header and footer.
Find the Page URL Slug
Click Pages in the left panel.
Hover over the page > click the ⚙️ gear icon (Page Settings).
This opens a pop up pages similar to the one below.
Click on the Navigation option and here you can disable both the header and footer on the page.
Key Takeaways
Hiding the header and footer can increase conversions and focus user attention.
This method is code-light and does not require developer mode.
Use for thank-you pages, sales pages, event registrations, and more.
Can be applied globally or to a specific page using collection IDs.
FAQs
Can I hide the header and footer on just one page?
Yes! Use your page’s collection ID. Here’s an example:
cssCopyEdit/* Hide header and footer on one page only */#collection-123abc456def .header,#collection-123abc456def #footer-sections { display: none !important;}Replace collection-123abc456def with your actual page ID. You can find this using the Squarespace Collection/Block Identifier Chrome extension.
Will this affect SEO or navigation?
No, it only affects the visual layout. The content still exists in the page’s source code and is crawlable by search engines.
Can I still use this with page banners or videos?
Yes — this only hides the navigation and footer, not your main page content or banners.
Do I need a Developer Plan?
No — this works with all standard Squarespace 7.1 plans.
Conclusion
Hiding the header and footer in Squarespace 7.1 is a simple but effective trick for creating distraction-free landing pages, opt-in forms, sales funnels, and more — all without external tools or advanced coding. Whether you apply it sitewide or to a single page, this tweak gives you more creative and marketing control over your site's layout.
