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:

1. Click Edit on your website.

2. Hover over your site header and click Edit Site Header.

3. In the sidebar, click + Add Elements.

4. 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

Design → 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 Design → Site Styles

Brine Template Family

This template supports converting the secondary navigation into a button:

• Go to Design → 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:

1. Add a navigation link to the last spot in your menu.

2. Go to Design → Custom CSS

3. Paste the CSS for your template (examples below)

Header Button CSS for Popular 7.0 Templates

Brine & Farro (Primary Nav)

Copy

Copied!

.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)

Copy

Copied!

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

Copy

Copied!

.main-nav>ul>li:last-child a {
   background: #000000;
   color: #ffffff !important;
   padding: 10px 20px !important;
   border-radius: 30px;
   border: 2px solid #ffd966;
}
  

Five

Copy

Copied!

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

Copy

Copied!

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)

Copy

Copied!

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)

Copy

Copied!

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 (FAQs)

1. How can I put multiple buttons in my header in Squarespace?

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.

2. Why is my header button now showing on mobile?

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.

3. Can I get the button link to open in a new tab?

Yes. When editing the button link:

Click the link field.

Click “Open in new tab” on the toggle before saving.

4. How do I get my header button to pop more?

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.

5. If I update button styles, will this affect all buttons across the site?

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).

6. What if my Squarespace 7.0 theme doesn't have space for a header button?

You can, however, add a button by:

• Creating a new navigation link at the bottom.

• Custom styling it with CSS.

If you're unsure, request the CSS you will need for your theme.