How to Hide Header and Footer Squarespace 7.1

How to Hide the Header and Footer in Squarespace 7.1: A Step-by-Step Guide

Squarespace 7.1 offers beautiful templates and flexible design features, but sometimes you need to go beyond the built-in options. Whether you're designing a landing page, a coming soon screen, or a distraction-free sales funnel, removing the header and footer from specific pages can help you create a cleaner, more focused user experience.

In this guide, we’ll show you how to easily hide the header and footer in Squarespace 7.1 using custom CSS—no advanced coding skills required. You’ll learn how to target a specific page using its unique page ID, add the correct CSS code, and adjust spacing so your layout remains clean and responsive on all devices.

Why hide the header and footer?

• Create distraction-free landing or sales pages

• Design minimalist thank-you or confirmation screens

• Build custom microsites or full-page embeds

• Hide navigation for a focused call-to-action

How it works:

1. Find your page’s unique ID using your browser’s developer tools.

2. Add custom CSS that targets that specific page’s ID and hides the .site-header and .site-footer elements.

3. Optionally remove extra padding or margins for a clean, full-screen design.

You can also apply this method to multiple pages by adding more page IDs to the CSS. This approach gives you more creative control without relying on third-party plugins or external code injections.

Whether you're a Squarespace beginner or building advanced designs, this simple trick can help you achieve a polished, customized look that fits your brand’s goals. Read the full tutorial to copy the code and follow along!