How to Change Header Menu Layout on Squarespace
By Nick Croce
Your website header is one of the first things visitors see, so it’s essential to make sure it looks great and works seamlessly with your brand.
In this guide, we’ll walk you through how to change the header layout in Squarespace to give your site a professional, customized look.
Opening the Header settings menu.
To get started, log in to your Squarespace account and open your site. Click Edit to open the editor.
Once inside the editor, hover over your header and click Edit Site Header.
Choose Your Layout.
In the header settings, you’ll find under the Design tab the Layout selection. Here you can choose from the five different navigation layouts:
- Classic Header: This layout features the logo on the left or center, with menu items to the right. It’s ideal for business sites or more professional-looking websites, and one I use very often!
- Centered Header: This style places the logo in the center with navigation links on either side or below. Perfect for creative sites or portfolios, it adds a sense of symmetry, and works really well with minimal aesthetic websites.
- Split Navigation: The logo sits in the middle with navigation items split on each side. This modern look is popular for fashion and lifestyle brands.
- Stacked Header: The logo is above the menu, with links displayed in a row below. Great for minimal, clean designs.
- Sidebar Header: Moves the menu to a sidebar rather than at the top, creating a unique look. It’s useful for sites that want a full-screen feel.
Customize additional header elements (optional)
After choosing your layout, customize specific elements to match your brand:
- Logo Placement: Adjust the placement of your logo to the left, right, or center.
- Navigation Style: Choose between inline, stacked, or hidden (like a hamburger menu) options.
- Header Color and Background: Squarespace lets you set the header background color or even make it transparent for an overlay effect.
- Font and Text Size: Adjust the font, text size, and color for your navigation links to improve readability and align with your brand style.
Save and preview your changes!
That’s it! Your header should now be updated. Remember to save your changes by clicking Save in the top left of the menu.
Congratulations! You have successfully updated your header layout on your Squarespace website.
Frequently asked questions
Can I customize the header for different pages?
Yes, Squarespace’s newer templates (7.1) allow you to apply different header layouts and styles to individual pages. This is useful if you want a simpler header on your homepage and a more detailed one on other pages.
How do I add a call-to-action (CTA) button in the header?
Some Squarespace templates allow you to add a button directly in the header. Look for the Button option under Header settings to add a CTA, which is great for encouraging sign-ups or highlighting promotions.
What if my template doesn’t support the header layout I want?
If you’re using an older Squarespace template, consider switching to a newer 7.1 template or contacting a Squarespace developer to explore custom CSS options.
How do I edit the site header in Squarespace?
Click Edit on any page, hover over the header and click Edit Site Header. Everything about the header lives there: the layout, the logo, the navigation style, the colours, the button and the mobile menu. Changes apply to every page unless you’ve set a page to use its own header style.
Can I have a different header on each page?
Partly. The layout is site-wide, but on 7.1 you can set a different header colour and style per page: in Edit Site Header, open Style, and under “Page style” choose to apply the current colours to this page only. For a transparent header over a hero image on one page and a solid one everywhere else, that’s the setting to use.
Why does my header look different on mobile?
Squarespace uses a separate mobile header: the menu collapses into the hamburger icon and the layout options don’t apply. In Edit Site Header, the Mobile tab controls the logo size, the icon style and the overlay colours.
Your users will thank you for adding this.
Rather hand the whole site over than fiddle with settings? I’m a Squarespace website designer working with businesses across the UK. And if you’re weighing up who to hire, here’s my list of the best Squarespace designers in the UK.
Congrats! You’ve officially reached the bottom of the article.
