How to Change Header Menu Layout on Squarespace
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.
Step 1: 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.
Step 2: 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.
Step 3: 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.
STEP 4: 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.
Your users will thank you for adding this.
Congrats! You’ve officially reached the bottom of the article.
Want more tips like this? Join my newsletter below! It’s free, and I won’t spam you.
Your Squarespace Designer
Hi, I’m Nick. I've been designing killer brands and stunning websites for over five years. I have worked with all types of clients of all sizes, from entrepreneurs to global corporations, and I combine my graphic design & branding experience with Squarespace specialism to make bespoke websites that are uniquely you.
Ready to discuss your project? Book a free 15 min consultation call!
