How to Add a Button to Your Header Navigation in Squarespace (7.0 & 7.1)
Want to highlight a key action like booking a service, visiting your shop, or contacting you directly from your site’s top navigation? Adding a button to your header is the perfect way to draw attention to your primary call to action.
Whether you're using Squarespace 7.0 or 7.1, adding a header navigation button is simple. This guide walks you through both versions, including styling tips and CSS if needed.
Squarespace 7.1 Add a Header Navigation Button (No Code Needed)
Adding a button in Squarespace 7.1 is quick and straightforward using the built-in editor.
Step-by-Step Instructions:
Click Edit on your website.
Hover over your site header and click Edit Site Header.
In the sidebar, click + Add Elements.
Toggle the Button option to On.
You’ll now see a button appear in your header.
Customize the Button:
Click the button in the header.
Hit the pencil icon to open the settings.
Add your button text and link, and adjust the style under the Design tab.
To further refine its design, you can head to
Site Styles → Buttons → Edit Button Styles
Note: Changes to button styles here apply site-wide.
Once your button looks the way you want, click Save, and that’s it! You’ve added a professional-looking button to your Squarespace 7.1 header.
Squarespace 7.0: Add a Header Button (Depends on Your Template)
Adding a header button in Squarespace 7.0 varies depending on your template family. Here’s how to approach it based on what you're using:
Bedford Template Family
Good news! The last link in your navigation is automatically styled as a button. Simply:
Add your link in the Main Navigation
Customize the button under Site Styles
Brine Template Family
This template supports converting the secondary navigation into a button:
Go to Site Styles
Change Secondary Navigation Style to Button
Note: This limits you to using secondary navigation for the button, which may not suit all layouts.
All Other Squarespace 7.0 Templates
You’ll need to manually transform your navigation link into a button using custom CSS.
Step-by-Step:
Add a navigation link to the last spot in your menu.
Go to Pages → Custom Code → Custom CSS
Paste the CSS for your template (examples below)
Header Button CSS for Popular 7.0 Templates
Brine & Farro (Primary Nav)
.Header-nav--primary .Header-nav-item:last-child {
background: #000000;
color: #ffffff !important;
padding: 10px 20px !important;
border-radius: 30px;
border: 2px solid #ffd966;
}
Brine & Farro (Secondary Nav)
.Header-nav--secondary .Header-nav-item:last-child {
background: #000000;
color: #ffffff !important;
padding: 10px 20px !important;
border-radius: 30px;
border: 2px solid #ffd966;
}
Avenue
.main-nav>ul>li:last-child a {
background: #000000;
color: #ffffff !important;
padding: 10px 20px !important;
border-radius: 30px;
border: 2px solid #ffd966;
}
Five
nav#main-navigation>ul>li:last-child a {
background: #000000;
color: #ffffff !important;
padding: 10px 20px !important;
border-radius: 30px;
border: 2px solid #ffd966;
}
Pacific & Jones
div#mainNavWrapper nav > div:last-child a {
background: #000;
color: #fff !important;
padding: 10px 20px !important;
border-radius: 30px;
border: 2px solid #ffd966;
}
York (Primary Nav)
div#mainNavWrapper .nav-item:last-child a {
background: #000000 !important;
color: #fff;
padding: 10px 20px !important;
border-radius: 30px;
border: 2px solid #ffd966;
}
York (Secondary Nav)
div#secondaryNavWrapper .nav-item:last-child a {
background: #000000 !important;
color: #fff;
padding: 10px 20px !important;
border-radius: 30px;
border: 2px solid #ffd966;
}
Customizing Your Header Button with CSS
Here’s what you can tweak to fit your brand:
Background and Text Color:
background: #000000;
color: #ffffff !important;
Padding (controls size):
padding: 10px 20px !important;
10px = top & bottom padding
20px = left & right padding
Rounded Corners:
border-radius: 30px;
Set to 0px for a square/rectangular button.
Border Styling:
border: 2px solid #ffd966;
Change 2px to adjust thickness
Change solid to dashed, double, etc.
Customize color with any hex code
Want no border? Just delete the entire border line.
Final Steps
After editing your CSS, click Save in the top-left.
Refresh your live site to preview your new button in action.
Final Thoughts
Adding a button to your header navigation in Squarespace is one of the easiest and most effective ways to highlight your site’s primary action and improve conversions. Whether you’re using the no-code toggle in 7.1 or styling with CSS in 7.0, this feature adds polish and functionality to your brand.
Let me know if you’d like:
A downloadable version of this guide
Pre-made CSS templates with hover effects
Tips for mobile-specific header buttons
Frequently Asked Questions
-
Squarespace in the standard version (at least in 7.1) only supports a single designated header button. But you can add more “button-style” links with some custom CSS by making normal navigation links look like buttons.
-
In some templates, specific navigation elements may be hidden in mobile or placed under the mobile menu. You may need to:
Check Site Styles → Mobile Styles?
Or you can apply media queries in the custom CSS for the buttons to make sure they show up in smaller screens.
-
Yes. When editing the button link:
Click the link field.
Click “Open in new tab” on the toggle before saving.
-
To dress up your button a bit:
Use bold contrast colors.
Give hover effects (change of background color, box shadow).
Increase border-radius for pill look.
Include animation using custom CSS.
Need help with this? Request readymade CSS templates that come with hover effects.
-
Yes, Site Styles → Button changes are site-wide.
Use the following to target just the header button with the custom CSS by either its position or its unique class (eg, Header-nav-item:last-child).
