If you're using Squarespace 7.1 and wondering how to add multiple buttons to your header navigation, you're in the right place. Many site owners want to include more than one call-to-action (CTA) button in their header—for example, one for "Contact Us" and another for "Book Now."

By default, Squarespace 7.1 only allows a single CTA button in the header. But with a simple combination of CSS and JavaScript, you can easily duplicate the header button and customize it to your liking. This step-by-step guide will show you exactly how to do it, no coding experience required.

Step 1: Toggle On the First Button in Your Site Header

Before adding a second button, make sure the first CTA button is already active on your Squarespace site.

How to do it:

Go to Site Styles.
Find the Header Layout section.
Toggle ON the Show Button option.
Set the text and URL for your first button.

Now that the first button is active, let’s move on to adding the second button.

Add Multiple Buttons to Header Nav in Squarespace 7.1

Step 2: Add Custom Code for the Second Button

To add a second button to your header nav, you’ll need to insert some custom CSS and JavaScript into your Squarespace site.

A. Add CSS

Navigate to:
Custom Code > Custom CSS
Paste the following code into the CSS editor:

////SQUARESPELL.CO.UK///
.header-actions-action.header-actions-action--cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;

////STACK BUTTON///
  -ms-flex-direction: column;
  flex-direction: column;
////STACK BUTTON///  

  gap: 1vw;
  text-align: center;
  }
////SQUARESPELL.CO.UK///

This CSS code changes the layout of your header CTA buttons so they stack vertically with proper spacing.

B. Add jQuery to the Header

Go to:
Custom Code > Code Injection > HEADER
Add the following jQuery script tag:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

This includes jQuery, which is required for the button duplication script to work.

C. Add JavaScript to the Footer

Go to:
Custom Code > Code Injection > FOOTER
Paste the following code into the footer section:

<script>
  $( ( ) => {
    let $cta = $( '.header-actions-action--cta' );
    let $newButton = $( '.btn', $cta [ 0 ] ).clone ( );
    $newButton.attr ( 'href', 'enter url here' );
    $newButton.text ( 'BOOK NOW' );
    $cta.append ( $newButton );
    } );
</script>

Important:

Replace 'enter url here' with the actual link you want your second button to direct to.
You can also change 'SECOND BUTTON' to whatever label you want the button to display.

Final Result

Once everything is in place:

Your original header button will appear as usual.
A second button will show up right below it.
Both buttons will be fully functional and styled consistently.

What Makes Buttons Stack (One Below the Other)

The key part of this CSS that makes the buttons stack vertically is this:

-ms-flex-direction: column;
flex-direction: column;

flex-direction: column; tells the browser to lay out child elements (in this case, the buttons) in a column—one on top of the other.
The -ms- prefix is for compatibility with older versions of Internet Explorer (not widely needed anymore, but still sometimes included).
So when this is set to column, your buttons will appear stacked—each button on its own line.

If You Want Buttons Side by Side (Horizontally)

To display the buttons next to each other (in a row) instead of stacked, simply remove this part:

////STACK BUTTON///
  -ms-flex-direction: column;
  flex-direction: column;
////STACK BUTTON///

Conclusion

Adding multiple buttons to the header nav in Squarespace 7.1 may not be a built-in feature, but it’s totally possible with just a bit of custom code. Whether you want to direct users to different pages or highlight multiple CTAs, this method offers a clean and efficient solution.

By following this guide, you can easily upgrade your site’s navigation and improve your user experience—all while keeping things visually aligned with your brand.