Today We’ll be going over how to create a landing page without any header and/or footer on it. This design is perfect for landing pages, stores, and even home pages with other content below.
This code snippet is one of the most simple in CSS Designs. There are two ways you can do this.
Remove Header & Footer From Single Page
Step 1: Go to the page that you want to take the Header and Footer from.
Step 2: Go to the page settings (the gear icon ⚙️) and then click on the Advanced option to get to the Page Header Code Injection.
Step 3: Insert this code into the Page Header Code Injection:
<style>
.header, footer {
display: none !important;
}
</style>Step 4: Click save on the window and Enjoy!
Remove Header & Footer From The Entire Website
Step 1: Go to the Design tab and click on the Custom CSS at the very bottom of the settings
Step 2: Copy and Paste this code into the CSS Editor:
.header, footer {
display: none !important;
}Step 3: Click save and Enjoy!
An optional fix is if you want only the Header OR the Footer to disappear, you’ll just delete that specific target out of the code snippet. An example of the code snippet to have an entire website without the footer would be:
footer {
display: none !important;
}Thanks for checking out my tutorial on How to Remove the Header and/or Footer from a Squarespace Website! If you need any help, please Contact Me and if you’re looking for a Certified Squarespace Designer, please check me out here.
Have a great day, be safe, and stay healthy!
