How to Edit Your Squarespace Website Header
Heads up: this post may contain affiliate links. In other words, if you make a purchase using my link, you won’t pay a dime more but I’ll earn a small commission. My chips and salsa fund thanks you from the bottom of its heart… er stomach?
Squarespace just made some updates to the way we edit our website header. So, in today's video, I want to walk you through those updates and show you how you can customize the look and feel of your Squarespace site header area.
Click Play to watch the tutorial or scroll down for the transcript:
How to Edit The Header in Squarespace
So I'm over here on my demo website and to see the new features; click on the edit button and then edit site header. And now you can see that we have different sections of that navigation or of that site header area.
So we have one for site title and logo. And if you click on that, you'll get a little pencil icon where you can update your site title or upload your logo image.
If you click on the navigation, you can rearrange the pages and basically drag them and drop them into place how you want them to appear.
If you click on show pages, that'll take you to the site navigation area and basically take you out of the editing mode. As you can see, I get a pop up asking me if I want to save my changes.
And if I click exit, nothing will change here, but I will be taken to the pages area where I can basically add more pages to my main navigation or drag them from the main navigation into the not linked section. It's a shame that we can't add pages directly in that menu, but it is what it is, maybe Squarespace will add that in the future.
If we go back to the edit site header mode, you can also edit the social links that you have here. And if you click on the edit button, you can change the design by customizing the social icon size and specifying whether or not they have a border and what that border should look like. You can also add more social links here. And if you click on edit, you can drag and drop and rearrange the icons to appear in the order that you want.
How to Resize The Header in Squarespace
Another cool feature of this update is that now we have this option to resize the header. So if you drag this up or down, you can make the site header bigger or smaller.
And then you also have the option to add elements such as the button, the social links the card icon, or the language switch.
How to Change The Squarespace Header Layout
Another cool feature is that if you click on the edit design option, here is where you can change the layout of your site header. No new options here. They're the same as before, but if you want to switch it up and change the look of your navigation, this is where you can do it. You can change the spacing between individual links, as well as between different elements.
So for example, your site navigation and your social links, this is what the element spacing does. Like so, and then you have the same effects options as before. You can add the drop shadow, a border and make your header be sticky. So that when somebody scrolls down your site, they can always see the menu, no matter how further down they scroll.
And then you can also control the height of the menu here manually if you don't want to use that slider that is present, and control the width of your header area, whether you want it to be full or inset like so.
For the drop shadow, you have some new options. You can choose between soft and strong and you can choose the color. Keep in mind that it's not very visible right now because the color of the header area and the first section that we have here is the same. So you can't really see it. In order to see this, you would have to change the colors.
And then you have the same options as before. You can change the color for the drop shadow, control the spread, the distance and the blur, and you can remove it by clicking remove.
And the same applies for border. You can choose the color, the thickness of it and where you want the border to be. And yeah, this is how you now edit the site header in your Squarespace website.
Final Thoughts
And that's it for this tutorial. If you need more help with your Squarespace website, be sure to download my step-by-step Squarespace launch roadmap.
For more tips and tricks, check out these articles:
