Website Building » Squarespace » How Do I Change the Header Button in Squarespace?

How Do I Change the Header Button in Squarespace?

Last updated on May 18, 2023 @ 9:42 am

There are many ways to change the header button in Squarespace. One way is to use the ‘Site Header Editor‘. This can be accessed using the button at the top of the Page Editor. Here you can change the button’s name and link.

To do this, simply open your Squarespace Page Editor by clicking on the “Edit” button at the top.

In the Page Editor, hover your cursor over the header section and click on the “Edit Site Header” button that will appear.

The Site Header Editor window will then appear. Select the “Elements” option from the list to open the Elements Settings window.

Here, you can find the Button Settings where you can change the name and link of the button in your page’s header.

Once you’ve changed the button settings of your header, click on the “Save” button at the upper-left corner of the editor to save your changes.

Another way to change the header button is to use CSS. This can be done by going to the ‘Design‘ settings in the left-hand panel and selecting ‘Custom CSS‘.

NOTE: The Custom CSS panel in Squarespace is a feature that allows you to apply custom CSS code to your website. When changing the header’s button settings, the Custom CSS panel can be used to add specific styles or modifications.

This will open the Custom CSS panel where you can add your own CSS code to change the style of your header button.

In this example, we added a CSS code to change the color and add a gradient fill to the header button. The effect of the code will be reflected on the button in real time. When you’re happy with the changes in your header button, just click on the “Save” button to apply your changes.

PRO TIP: Consider the overall design and usability of your website when making style and link modifications to your header button. It’s essential to maintain consistency and ensure the button is easily identifiable and functional for your website visitors.


There are a few different ways that you can change the header button in Squarespace. You can use either the ‘Site Header Editor’ tool or CSS code to change its appearance. Just remember to test your changes on different devices and screen sizes to ensure that the button looks and functions correctly across various platforms!

Kathy McFarland

Kathy McFarland

Devops woman in trade, tech explorer and problem navigator.