How to Add Multiple Header Buttons on Squarespace [2025]

How to Add Multiple Header Buttons on Squarespace - Free Guide

If you're looking to boost conversions and give your visitors clear paths to key actions like "Donate", "Get a Quote", or "Book a Call", then it’s time to add multiple header buttons on Squarespace.

This small but mighty tweak can really help improve your site's usability, and best of all, it’s completely free! In this tutorial, I’ll show you exactly how to do it with just a bit of copy-paste code.

---

Why Add Multiple Header Buttons on Squarespace?

Adding more than one button to your header is a great idea if you:

• Want to highlight multiple CTAs (calls to action)

• Run a charity or business where actions like "Donate" or "Support Us" are key

• Want to guide visitors more effectively through your site

• Need separate desktop and mobile button styles

Squarespace doesn’t give you this feature out of the box—but with a simple custom script and some CSS, we’ll make it happen.

Step-by-Step: Add Multiple Header Buttons on Squarespace

This solution works on both desktop and mobile views, and you can easily customise the text, links, and colours to match your brand.

1. Add JavaScript in the Footer Code Injection Area

Go to: Pages → Scroll Down To Website Tools → Code Injection → Footer

Then paste the following JavaScript:

<!-- Multiple Buttons In Header By The Square Genius --> <script> document.addEventListener("DOMContentLoaded", function () { // DESKTOP const desktopHeader = document.querySelector(".header-actions"); if (desktopHeader) { const newBtn = document.createElement("a"); newBtn.href = "/donate"; // Change this to your desired URL newBtn.textContent = "Donate"; // Change button text newBtn.className = "header-button custom-header-button"; desktopHeader.appendChild(newBtn); // 👉 To add a third desktop button, just copy below code and remove the /* symbols: /* const thirdBtn = document.createElement("a"); thirdBtn.href = "/get-involved"; // Change to your third button link thirdBtn.textContent = "Get Involved"; // Change text thirdBtn.className = "header-button custom-header-button"; desktopHeader.appendChild(thirdBtn); */ } // MOBILE const mobileMenu = document.querySelector(".header-menu-nav"); if (mobileMenu) { let btnWrap = document.querySelector(".header-menu-buttons"); if (!btnWrap) { btnWrap = document.createElement("div"); btnWrap.className = "header-menu-buttons"; mobileMenu.appendChild(btnWrap); } const existingBtn = document.querySelector(".header-menu-cta .btn"); if (existingBtn) { btnWrap.appendChild(existingBtn.cloneNode(true)); } const newMobileBtn = document.createElement("a"); newMobileBtn.href = "/donate"; newMobileBtn.textContent = "Donate"; newMobileBtn.className = "header-button custom-header-button mobile-button"; btnWrap.appendChild(newMobileBtn); } }); </script> Copy

Customising Your Buttons

Here’s what you can change easily:

• Button text: Change "Donate" to anything you like (e.g., "Book Now", "Contact", "Shop").

• Button URL: Update /donate with any internal or external link.

• Colors and fonts: Use your brand’s colors and fonts in the CSS.

• Add more buttons: Just repeat the createElement section in the JS and change the label and URL link.

2. Add The CSS Code To style Your New Button

Now head to Pages → Scroll Down To Website Tools → Custom CSS and paste in the below CSS code. I've added comments to help you easily tweak styles for your brand.

/* header button by The Square Genius */ .custom-header-button { margin-left: 10px; padding: 12px 20px; background-color: #FFA500; /* 💡 Change this to your brand colour */ color: #fff; border-radius: 4px; font-family: 'helvetica neue', sans-serif; letter-spacing: 0.05em; font-size: 15px; font-weight: 500; text-decoration: none; display: inline-block; box-shadow: 2px 2px #fff; /* 💡 Change the shadow colour if needed */ transition: all ease-in .05s; border-radius: 6px !important; } .custom-header-button:hover { background-color: #FFA500; /* 💡 Change to hover colour */ box-shadow: none; transform: translateY(4px) !important; transition: all ease-in .05s; } /* Mobile Styles on New Button */ @media (max-width: 767px) { .mobile-button { display: block; margin: 15px auto; padding: 13px 20px; text-align: center; width: 35%; /* 💡 Adjust width to suit your layout */ font-size: 18px; font-weight: 500; } } @media (max-width: 767px) { .header-menu-buttons .btn { font-weight: 500 !important; padding: 17px 20px; width: 28%; } } /* Removes original duplicate button on mobile */ @media (max-width: 767px) { .header-menu-cta { display: none !important; } } Copy

Why This Tweak Is Worth Doing

In a world of short attention spans, making it easy for your visitors to take action is key. When you add multiple header buttons on Squarespace, you’re giving them direct access to what matters most—without cluttering your design or relying on clunky workarounds.

This is one of those small changes that can make a big difference—and you don’t need to pay a developer to make it happen.

You might also be interested in my article on how to add a progress bar to show viewers how far you’ve got to reach your goals - whatever they may be!

Did I help you? Consider buying me a coffee as thanks!

---

For more cool Squarespace tips check out my blog, or sign up to my newsletter.

Check out my Squarespace Premium Plugins

---

Must Have CSS Codes!

Enter your email to get access to my must have CSS codes for Squarespace!

Yes please!

Loading...

Thank you!

You have successfully joined our subscriber list.