Skip to content

How to Remove Site Header Squarespace

how to remove site header squarespace

To remove the site header on the Squarespace website, the method is quite easy, but before deleting the header on our website that uses Squarespace, first we have to determine the header that we will delete whether it will be deleted on all pages or only certain pages, this is very important because sometimes we only want to delete headers on certain pages.

In this tutorial, we want to give tips on how to remove headers on our website that use Squarespace either on all pages or only on certain pages. But before that we will discuss why sometimes we don’t need headers on our website.

What is Squarespace?

Squarespace is a platform that can be used to create websites in a very easy way, namely drag and drop. Squarespace is a revolution in the world of websites because it provides convenience for its users who are completely unfamiliar by creating a website so that they can create a website easily.

What is Squarespace Header?

The header in Squarespace consists of a block and is usually located at the top of the website page. Since it consists of a block we can edit and delete it easily for a particular page as well as on all pages.

Reasons to Remove Headers in Squarespace

  • We don’t need headers on our website
  • Our website is quite simple and wants to directly display the content
  • Our website contains only one page and no need for navigation
  • Other reasons

To remove website headers on Squarespace website builder whether you delete headers on all pages or on certain pages, you can follow these steps.

How to Remove Site Header Squarespace

1. Go to your dashboard via https://www.squarespace.com/.

How to Remove Site Header Squarespace - Step 1
How to Remove Site Header Squarespace – Step 1

2. Select the website whose header you want to delete.

How to Remove Site Header Squarespace - Step 2
How to Remove Site Header Squarespace – Step 2

3. Go to the Design > Custom CSS menu, add the following code to remove the header on all pages of your Squarespace website, then click “Save“.

header{display:none}
How to Remove Site Header Squarespace - Step 3
How to Remove Site Header Squarespace – Step 3
How to Remove Site Header Squarespace - Step 4
How to Remove Site Header Squarespace – Step 4
How to Remove Site Header Squarespace - Step 5
How to Remove Site Header Squarespace – Step 5

4. To delete a header on a certain page you must know the ID of the header you want to delete, the method is quite easy, here we will take advantage of an extension from the Google Chrome browser called “Squarespace ID Finder“. So we first have to install this browser extension, the trick is to click the menu in the upper right corner of the Google Chrome browser then select More tools > Extensions.

How to Remove Site Header Squarespace - Step 6
How to Remove Site Header Squarespace – Step 6

5. Click the menu at the top left, then select “Open Chrome Web Store“.

How to Remove Site Header Squarespace - Step 7
How to Remove Site Header Squarespace – Step 7
How to Remove Site Header Squarespace - Step 8
How to Remove Site Header Squarespace – Step 8

6. Type “Squarespace ID Finder” in the search box, then after finding it, click the application. Then click the “Add to Chrome” button, then click “Add Extension“.

How to Remove Site Header Squarespace - Step 9
How to Remove Site Header Squarespace – Step 9
How to Remove Site Header Squarespace - Step 10
How to Remove Site Header Squarespace – Step 10
How to Remove Site Header Squarespace - Step 11
How to Remove Site Header Squarespace – Step 11

7. Go back to your Squarespace page, to bring up the header ID on a certain page in Squarespace you just click on the extension by selecting the “Extensions” menu > “Squarespace ID Finder“, then the ID of your Squarespace website blocks will appear.

How to Remove Site Header Squarespace - Step 12
How to Remove Site Header Squarespace – Step 12

8. Copy your header ID by clicking it, then paste it in the Custom CSS section as before, so that the result code becomes as below.

#collection-6327bf94e16bd04fce6bb64a header{display:none}
How to Remove Site Header Squarespace - Step 13
How to Remove Site Header Squarespace – Step 13
How to Remove Site Header Squarespace - Step 14
How to Remove Site Header Squarespace – Step 14

9. In this way you have managed to remove the header on the Squarespace website either on all pages or only on certain pages.

For those of you who are still struggling with how to remove headers on Squarespace you can also watch the guide in the form of the following video. Don’t forget to subscribe to our YouTube channel for more updates on Squarespace tips and trick.

How to Remove Site Header in Squarespace Website (Video)

Leave a Reply

Your email address will not be published. Required fields are marked *