How to Hide the Header or Footer on Squarespace to Make a Better Landing Page

Squarespace’s built-in version of landing pages, Cover Pages, are great if you have minimal info to share and are looking for a no-code solution. With lots of beautiful layouts to choose from, they are a great solution for simple landing pages, coming soon pages, opt-ins and more. You are limited in what you can include (no code blocks, limited layouts, limited buttons and navigation options) and they don’t look as clean when you have lots of content that might require a bit of scrolling. 

Instead of trying to hack a Cover Page (difficulty level: hard), a couple small bits of code will render any regular page on your site into a landing page without any top or bottom navigation (difficulty level: easy). We like quick and easy hacks!

(This code uses the Collection ID to reference the page that you’d like to target. Don’t worry - check out this post for a quick tutorial on how to find this info!) 

Here’s the code: 

Hide Just The Header

#collection-####### {
header, footer {
display: none !important;
}
}

Hide Just The Footer

#collection-####### {
footer {
display: none !important;
}
}

Hide Both!

Just combine the codes above like this!

#collection-####### {
header, footer {
display: none !important;
}
}

Note: as with all our codes and hacks, this works primarily on Brine and Brine family template families. Your site may have additional navigation areas that need to be hidden or use slightly different naming. We can help with custom code with one of our Quick Fix code projects , which start at $25.