How to Edit Your Squarespace Header
What’s the first thing people see when they visit your Squarespace site?
Chances are that it’s your site header, sometimes referred to as your navigation bar.
As it’s the first element on your site on display, your header is a fantastic way to direct visitors to your most important pages, encourage them to follow you on social media, and, most importantly, persuade them to convert.
Squarespace makes it easy to change the style and layout of your header in just a few clicks. Here’s our guide to editing your site header in Squarespace in four simple steps.
How to Edit Your Site Header in Squarespace
The Squarespace theme you choose will determine how your Squarespace header will look by default.
However you can customize your header to include the content you need and reflect your brand’s unique style.
Here’s how to edit your header in Squarespace.
Step 1: Access Your Header
Go to any page on your Squarespace site and click EDIT.
Go to the top of the page, below the white banner which shows you which page you’re on. Your site header should gray out.
Click the EDIT SITE HEADER BUTTON.
Step 2: Choose the Elements You Want in Your Header
Click the ADD ELEMENTS button which is on the left-hand side of your page.
A menu will appear. Toggle the buttons to turn particular elements on and off in your Squarespace header—your header will update in real time so you can see how the changes look.
Don’t worry if you don’t like how the default settings look—you can change them in step 4.
Button: Add a call-to-action button to your header
Social links: Add links to your social media accounts
Cart: Add a shopping cart link if you sell online
Account: Add a login for customers to sign in to an account
Language Switch: Let customers view your website in another language. Your site needs to be multilingual to allow this
Click out of the menu when you’re done.
Step 3: Change the Design of Your Header
Click the EDIT DESIGN BUTTON which is on the right-hand side of your page.
This will open the design menu, where you can change the design aspects and the color of your Squarespace header. Here are the options available in the Design section of the menu:
Layout: Choose the order your elements will appear
Link Spacing: Change the distance between navigation links in your menu
Element Spacing: Change the distance between all design elements in your menu
Effects: Add a drop shadow to the bottom of your menu and/or a border. You can also turn your menu into a sticky menu which is always visible wherever you are on a page by turning Fixed Position on
Size: Change the height and width of your Squarespace header.
The Color section of the menu lets you change the color of your Squarespace header. The default is Adaptive, which means it adapts to your general website color theme.
However you can change it to a solid or gradient color of your choice.
Click out of the menu when you’re done.
Step 4: Fine-Tune Your Header
The final step is to review and amend all the individual elements in your Squarespace header. To do this, hover over each individual element, click, and select the pencil icon to edit.
You can also delete certain elements by clicking on the red trash can. If you delete an element by mistake, you can add it back in by going to the Add Elements menu.
Here are the options available for each element:
Site title and logo: Amend your site title. You can also upload a logo for use on desktop and mobile
Navigation: Choose which pages you want to appear in your navigation bar and change the order they appear
Login: Delete your login link
Social Link: Add links to your social media profiles and change how the icons look. You can also add additional links, for example, to your email address
Cart: Change how your cart icon looks
Button: Change where your button links to and which style of button you use
Once you’re happy with the edits you’ve made to your site header, click Save.
Can I Edit How My Squarespace Header Looks on Mobile?
You can!
The beauty of Squarespace is that you can edit your header so it looks and performs differently on mobile than on desktop. For example, by making it more streamlined and easier to read.
To do this, follow step 1 as above. Then, in the white banner above the header menu, click the mobile icon on the right to enter mobile view.
You can then edit the design and menu of your header on mobile.
Can I Do Anything Else With My Squarespace Header?
These are all the amends you can make directly within Squarespace. However, if you know CSS code, you can make additional changes.
For example, this tutorial shows how to add a search bar to your header.
Alternatively, a Squarespace developer can customize your Squarespace header so it has all the functionality you need.
Squarespace Headers? Sorted With Studio Elias
Squarespace has many options to help you build the perfect header for your website.
However, If you’re looking for something a little more bespoke, we’re here to help.
We offer custom Squarespace website design services, as well as ongoing developer support. Whether you need a brand-new custom site or need help tweaking your existing header, we offer a fast, efficient, and friendly service, with results you’ll love.
Book your free 15-minute consultation today, and let’s work together to get your Squarespace site a-head of the competition.
