Add Multiple Header Buttons in Squarespace 7.1-Step-by-Step

Header button Squarespace 7.1 allows only 1 button in the header by default. Your header can only have one header button in 7.1. Now, let’s say you want 2 buttons or more, such as more calls to action or custom links; this standard restriction becomes a design block.

But there is a pretty dependable workaround. This is a plugin you can use to add multiple header buttons to your Squarespace website, with no custom code. This plugin features responsive design and design settings for all types of devices.

So to help you understand all the defaults, here is a guide on how to install the plugin and how to make the style fit into your layout and branding. You can use this to:

Include more than one call-to-action

1. Link to priority pages

2. Spotlight time-sensitive deals or announcements

3. That’s why it’s perfect for businesses, creators, or shops that need several high-visibility links at the top of their site.

This fully customizable and responsive solution makes it ideal for businesses, creators, or shops needing multiple high-visibility links in the header.

Why Use Multiple Header Buttons?

Having more than one header button:

• Increases conversion opportunities

• Improves navigation clarity

• Draws user attention to special offers, events, or important pages

TWO BUTTONS IN SQUARESPACE HEADER 

Purchase the Plugin from SQS Mods

Purchase the Two Buttons plugin directly from SQS Mods—$30.

Purchase Plugin

How Does It Work?

You insert additional <a> button elements using custom HTML in Code Injection and style them with Custom CSS to match the design of your existing site navigation.

Step-by-Step Implementation

Step 1: Insert the Buttons via JavaScript

Where:

Go to
Settings > Advanced > Code Injection > Header

What to paste:

Copy

Copied!

<script>
document.addEventListener("DOMContentLoaded", function () {
  const headerRight = document.querySelector('.header-actions');
  if (headerRight) {
    const button1 = document.createElement("a");
    button1.href = "/signup";
    button1.className = "custom-header-btn";
    button1.innerText = "Sign Up";
    const button2 = document.createElement("a");
    button2.href = "/book";
    button2.className = "custom-header-btn secondary";
    button2.innerText = "Book Now";
    headerRight.appendChild(button1);
    headerRight.appendChild(button2);
  }
});
</script>
  

Step 2: Style the Buttons Using CSS

Where:

Go to
Design > Custom CSS

What to paste:

Copy

Copied!

/* Base style */
.custom-header-btn {
  display: inline-block;
  margin-left: 12px;
  padding: 1.3rem 1.3rem;
  background-color: #000;
  color: white;
  text-decoration: none;
  font-weight: 600;
  //border-radius: 5px;
  font-size: 16px;
  transition: background-color 0.2s ease-in-out;
}
/* Hover effect */
.custom-header-btn:hover {
  background-color: #575757;
}
/* Secondary style (optional for second button) */
.custom-header-btn.secondary {
  background-color: transparent;
  border: 2px solid #000;
  color: #000;
  padding: 1.2rem 1.3rem;
}
.custom-header-btn.secondary: hover {
  background-color: #000;
  color: white;
}
  

 How to Use the Code

• JavaScript (HTML for buttons) → Paste inside
  Settings > Code Injection > Header

• CSS (for styling) → Paste inside
  Design > Custom CSS

• Save changes and refresh your site to see the buttons in action

Customization Options

1. Add more buttons – Duplicate the button1 or button2 block and modify
2. Button color – Change background-color, border, and color
3. Text style – Adjust font-size, font-weight, or text-transform
4 .Positioning – Use margin-left, or place buttons elsewhere using different header classes
5. Mobile behavior – Add media queries if needed to hide/reposition buttons on mobile

Customize Your Button Colors (Optional)

1. Your secondary button will follow the same color as the default first header button. If you’d like to change the colors of your secondary button, we’ll need to use some CSS. Our secondary button has the class of another-class. We’ll need this class when adding some custom CSS

2. Open up your website’s custom CSS by clicking the Website tab from the menu, then Pages. Scroll down to Utilities and click Website Tools » Custom CSS

3. Copy and paste the following CSS. Change the colors to whatever you’d like!

Copy

Copied!

.another-class {
  background: transparent! important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
}
  

Final Thoughts

Adding multiple buttons to the header in Squarespace 7.1 boosts visual impact and user interaction. Whether you want users to sign up, schedule, or shop, this technique gives you full control, no plugins, no limitations.

FAQ: Multiple Header Buttons in Squarespace 7.1

1: Can I add more than two buttons with this method?
A: Absolutely. Just duplicate the JavaScript block for each new button and adjust the href, className, and innerText as needed.

2: Will this method work on mobile devices?
A: Yes, but you may need to add custom media queries to fine-tune layout and spacing for smaller screens.

3: Can I use this with Squarespace Fluid Engine?
A: Yes. This method is independent of Fluid Engine and works at the site-wide header level.

4: Is there a no-code plugin option for this?
A: Yes! The SQS Mods plugin offers a visual solution for multiple header buttons starting at  $30, with responsive controls and visual styling tools.

5: Can I use different fonts or animations?
A: Yes, with additional CSS. You can customize typography, hover effects, button shadows, or even add icons using <span> or inline SVG.