How to Hide Headers and Footers in Squarespace

How to Hide Headers and Footers in Squarespace. Looking for the code to hide your Squarespace website's header and footer? Here's the code and where to place it. From The Qurious Effect | Squarespace web designer


Squarespace offers cover pages that can act as welcome mats, sales pages, 404 redirects and opt-in freebie landing pages. So why might you want to use a regular page and hide the header and footers instead?

More control for starters. Squarespace’s cover pages definitely come in handy but there are limitations to their design. And then there’s brand and style consistency. If you’d like all your pages to look on-brand, then hiding the header and footers on certain pages is a great way to accomplish design consistency.


When to Hide Headers and Footers on your Squarespace Website

Here are a three examples of when it’s a good idea to hide headers and footers using a regular web page instead of a cover page.

  1. Opt-in Freebie Landing Pages. For landing pages where you’d like people to sign up for something (and you don’t use Mailchimp). Using a regular website page allows you to insert the code from your email service provider (ESP) to either show the form and/or use a button by adding a bit of code in a code block.

  2. Replace your free LinkTree for Instagram account. Your own website is a great LinkTree alternative. By using a regular page on your site, you can style the links however you’d like in order to match your website. Check out mine here–simple but it matches my site way better than any of the free LinkTree options. And … THIS IS IMPORTANT … your website gets the inbound SEO links from Instagram instead of LinkTree.

  3. Sales Pages. For this type of page, you don’t want any distractions from what you’d like your visitor to do, so it makes sense to hide the header and footers of a regular page. You’d be quite limited here by a cover page and not able to easily create the multiple sections that typical sales pages involve or sign up buttons with your ESP.


How to Hide Headers and Footers on your Squarespace Website

So now that you know when it’s ideal, how do you go about actually hiding your Squarespace headers and footers?

There are different ways to accomplish this. The one I like best is to add the code to each page individually via the Pages pop up menu > Advanced tab > Page Header Code Injection.

Image showing the Page pop up window, advanced tab for inserting code into your Squarespace web page. By The Qurious Effect, Squarespace website design

My website uses the Mercer template in Squarespace (part of the Brine template family) so I’m showing the code I use below. Feel free to copy and paste it into your page's header code injection field, remembering to click SAVE.

.Header-nav-item {display: none !important}

.sqs-announcement-bar {display: none !important}

  .Footer-nav-group {display: none !important}

  .Footer-blocks--bottom {display: none !important}

Since I use an announcement bar on my website (the thin blue bar at the top of my site with my opt-in freebie offer), I also hide it when hiding headers and footers on a page. If you don’t use an announcement bar, simply delete that section of the code: <style> .sqs-announcement-bar {display: none !important} t</style> 

If the code isn’t working for you, it’s likely that your Squarespace template calls the header and footer elements something slightly different. You can find out what your specific elements are called by highlighting text in your header and/or footer and then right clicking and selecting Inspect (in Chrome) or Inspect Element (Safari or Firefox). A new window will open and on the right side, under Styles, you’ll see the CSS tags for the elements.

Image of Chrome Inspect Element showing how to find your Squarespace website's header element name. By The Qurious Effect, Squarespace web designer


Here you’ll be looking to see what exactly your Squarespace template calls the header, footer and/or announcement bar (if using). Then you can replace the element name from the code I’ve included with your own template’s element name. The element name is the part of the code that starts with a period  "." and ends before the first bracket "{". For example, the header navigation element we're hiding is ".Header-nav-item".


So there you have it. Three great reasons to use a regular Squarepsace website page instead of a cover page and how to hide your headers and footers in order to achieve a similar look with increased functionality, brand consistency and increasing SEO. 



Looking for the code to hide headers and footers in Squarespace for your landing page, sales page or Linktree for Instagram? Here’s the code and where to put it! Via The Qurious Effect | Squarespace Web Designer