How to Hide the Header and Footer on a Page in Squarespace

Sometimes a page needs to stand on its own. A landing page, a sales page, an event registration, or a “coming soon” splash all work better without your site’s main navigation pulling visitors away. The problem? Squarespace doesn’t include a built-in toggle to hide the header and footer on a single page.

The good news: it takes about 30 seconds with a small code snippet. This guide walks you through the easiest methods for both Squarespace 7.1 and 7.0.

Why Hide the Header and Footer?

A few common reasons:

• Landing pages for ads or marketing campaigns where you want one clear action
• Sales and opt-in pages where navigation links would distract from the offer
• Event, webinar, or registration pages that need full focus
• “Coming soon” or maintenance pages where there’s nowhere else to go
• Portfolio showcases where you want the work to fill the screen

Whichever method you pick below, the change only affects the page you apply it to — the rest of your site stays exactly as it is.

Squarespace 7.1: Use Custom CSS

This is the fastest and most reliable approach. It hides the header and footer instantly when the page loads, with no flicker.

Step-by-step:

1. Open Page Settings. In your Pages panel, hover over the page you want to edit and click the gear icon (⚙️).
2. Click the Advanced tab. You’ll see it along the top of the Page Settings window.
3. Copy the snippet below that matches what you want to hide.
4. Paste it into the Page Header Code Injection box and click Save.

Refresh the page on your live site to see the change.

Hide the header only

<style>
  #header {
    display: none !important;
  }
</style>

Hide the footer only

<style>
  #footer-sections {
    display: none !important;
  }
</style>

Hide both

<style>
  #header, #footer-sections {
    display: none !important;
  }
</style>

Squarespace 7.1: Hide with JavaScript (Optional)

JavaScript is overkill for simply hiding the header and footer — CSS does it faster and without any visual flicker. But if you want to hide them conditionally (only on mobile, only after a scroll, only after a delay), JavaScript is the right tool.

Paste this into the same place: Page Settings → Advanced → Page Header Code Injection.

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const header = document.querySelector('#header');
    const footer = document.querySelector('#footer-sections');
    if (header) header.style.display = 'none';
    if (footer) footer.style.display = 'none';
  });
</script>

Heads-up: Because JavaScript runs after the page starts loading, visitors may see a brief flash of the header before it disappears. Stick with CSS unless you actually need conditional logic.

Squarespace 7.0: Use a Cover Page (No Code)

If you’re on the older Squarespace 7.0, you have a built-in shortcut: Cover Pages. They automatically hide the header and footer — no code required.

1. Click Pages in the left menu.
2. Click the “+” button and select Cover Page.
3. Pick a layout that fits your design.
4. Edit the page with your text, image, and call-to-action button.
5. Save and publish.

Cover Pages are quick, but limited in customization. If you need more flexibility, use the CSS method below.

Note: Cover Pages were removed in Squarespace 7.1. If you’re on 7.1, use the CSS or JavaScript methods above.

Squarespace 7.0: Use Custom CSS

For a regular 7.0 page, the same CSS approach works — you just paste it into Page Settings → Advanced → Page Header Code Injection:

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

Note the selector difference: 7.0 uses #footer, while 7.1 uses #footer-sections.

Troubleshooting

• Test on mobile. Open the page on your phone or use your browser’s mobile preview. If something looks off, you may need a media query.
• Check multiple browsers. Chrome, Safari, Firefox, and Edge can render small differences.
• Don’t paste into a Code Block. A Code Block only affects content inside that block, not the page-wide header and footer. Use the Advanced tab.
• If the CSS doesn’t work, right-click your header on the live site, choose Inspect, and look at the actual ID or class name your template uses — some 7.0 templates use selectors like .Header or .site-header instead.

Wrapping Up

Hiding the header and footer on a single page is one of those small Squarespace tweaks that makes a big visual difference. For most people, the CSS snippet is the right call — fast, clean, and bulletproof. Reach for JavaScript only when you need conditional behavior, and if you’re still on 7.0, Cover Pages will save you even the small amount of code.

Happy designing!