How to Edit Your Squarespace Header

Jan 12

This is a tutorial is for version 7.1 and won’t apply to Squarespace version 7.0
For more information, visit insidethesquare.co/themes

In January 2024, Squarespace released a new way for us to edit the header of our website! This video is an overview of all the changes. You can edit your website header from any page.

Click Edit to hop into edit mode, and then hover over the header until you see edit site header. When you click on that, you’ll see two new options. On the right hand side of the screen it will say Add Elements. This is where you can toggle on or off these options: button, social media icons, cart, account, multiple languages.

All of these element options can be edited separately. Once you have it toggled on, and you’re still in edit mode, click on the element until it is outlined in blue. You’ll see a new button - a pencil icon. Click on that button to open the editor feature for that specific element. To change the site title or logo, you can click on the title or logo in edit mode and you’ll see it outlined in blue. You’ll also see a new button - a pencil icon - that opens up the editing menu for your title and logo.

Here you can change the title text or add an image. You can have one logo for the desktop version of your site and another one for mobile.

The second new option that you’ll see when you click Edit Site header is for the design of your header. This is where you can change the layout, moving the site title/logo area, links, and elements to different areas of the header. Under the layout option you can adjust link spacing and element spacing, and you’ll see your new design options!

We can now add a shadow and a border to your header. You’ll also see the option to set a fixed header. This will keep the header at the top of the screen. You can also select the scroll back option which will show the header at the top of your website, but only when you start to scroll back up the page. Next on your design tab, you’ll find the size option where you can adjust the height of the header, and the width option where you can have the header be full width or inset. The last part of this design menu is the color tab. Here, you’ll find three settings: solid, gradient, and adaptive. Adaptive will change the colors of your website header to match the color theme assigned to the first page section on that specific page. The gradient option lets you blend two colors together and the solid option lets you pick solid colors for the header and the links in your website header.

Last but not least - let’s talk about mobile! When you click on the mobile preview of your site, you’ll see a new options for editing your website header. Here you can edit the design, changing up the layout, and adding the same effects we have for the desktop version: shadow, border, and fixed position. You’ll also see color options for the header of your website that match what we saw on the desktop version, but there is one more important option here for editing the mobile version of your Squarespace website. \When you see view menu, you can click on this option, and the edit design button will open up the navigation design menu where you can change the alignment of the links in your website to be left, center, or right, and you can change the spacing. To change the color of your mobile menu - the background, the elements, and the links - you’ll need to pick one of your color themes. The colors you selected in your site styles menu will be applied to your mobile menu.

There is one final mobile option - the icon! To change the icon, click on the menu until it’s outlined in blue, just like the site title and elements were when we edited those. Click on the edit button that appears and you can change the icon itself and the thickness of the line.

🔗 Related Content 🔗

📺 Free Squarespace tutorial blog: https://insidethesquare.co
💌 Weekly Squarespace emails: https://insidethesquare.co/email
🎙️ Squarespace podcast: https://insidethesquare.co/podcast
❤️ Like this video? Buy me a coffee to say thanks: https://buymeacoffee.com/insidethesquare
🙋‍♀️ Need some help? Official Squarespace Support: https://support.squarespace.com
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code INSIDE10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 INSIDE10 → https://insidethesquare.co/inside10