How to Hide The Header, Navigation, and Footer on Specific Squarespace Pages

When you have a page with a very specific goal, such as getting a visitor to opt-in to your email list or purchase something on a sales page, it's best to give only one option on that page (taking the action you want the visitors to take)! 

How do we encourage that to happen? Strip out all the distractions and other options to be clicked.

I use the following CSS to hide both the header and footer of a page, so only the content of the page is showing. This way the only way to get off that page is to take the 1 action available on that page or hit the back button.

This CSS isn't completely a copy & paste job, there's a small bit of work you have to do here.

I'll lay out the steps as simply as I can, and explain why we're doing what we're doing.

First things first, we need to target a specific page. If we just popped in this code without specifying a page, then our header and footer would be missing from our whole site, and that's not what we're going for here. (Talk about building the worlds most impossible site to navigate ever... 😂)

Here's how to do that.

  1. Build the page.

  2. Open the page you just built in Google Chrome.

  3. On a Mac, hit control & click on the page. Click 'view page source'.

  4. Click command + F to search.

  5. Search for "title"

  6. Beside "title" will be the name of your page followed by "id": and a long string of numbers. Copy those numbers.

  7. Paste the following code into your Custom CSS in Squarespace (Design > Custom CSS).


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

  8. Replace the 'numbergoeshere' bit with the long number your copied earlier. 

You're all done!