Hide the Footer

What does this code do?

This code snippet will allow you to hide the whole footer or parts of the footer on specific pages.

 

Code Snippet

Squarespace 7.0

Copy and paste the code you need into Design > Custom CSS.

/* Hide the Whole Footer */
#COLLECTIONID footer {
    display:none;
}

/* Hide the Top Footer Block */
#COLLECTIONID .Footer-blocks--top {
    display:none;
}

/* Hide the Middle Footer Block */
#COLLECTIONID .Footer-blocks--middle {
    display:none;
}

/* Hide the Bottom Footer Block */
#COLLECTIONID .Footer-blocks--bottom {
    display:none;
}

Squarespace 7.1

Click on the Gear Icon for the Page you want to hide the footer on.

Copy and paste the code you need into Advanced.

<!-- Hide the Whole Footer -->
<style>
  footer {
       display: none;
    }
</style>

<!-- Hide Part of the Footer -->
<style>
  footer .page-section:nth-of-type(1){
       display: none;
    }
</style>
 

How To Use It

  1. Copy and paste the code as indicated above.

  2. If using Squarespace 7.1, edit the #COLLECTIONID to match the page you want to hide the footer on. For help finding the Collection ID see our Start Here Guide.

Rebecca Grace

Rebecca Grace is a Squarespace CSS Expert and Website Designer.

https://rebeccagracedesigns.com
Previous
Previous

Start Here

Next
Next

Add a Custom Font