How to Add a Second Button to Navigation in Squarespace

Have you ever wanted to add a second button to navigation in Squarespace?

Maybe you or your client has a special offer or product or a really awesome lead generator they want to highlight.

While I do recommend optimizing your website’s navigation to improve engagement and reducing the clutter in this strategic area of your website, it’s okay to add a second button if it’s relevant to something happening in your business.

I DO caution you to use this very carefully—it’s critical that this button lead the visitor to a place that will benefit both your target audience and you.

How to Add a Second Button to Navigation in Squarespace

To add a second button to the navigation menu in Squarespace, all you have to do is add a little bit of CSS—super easy.

Here’s how you do it:

1. Select Website > Website tools > Custom CSS

2. Copy the code below (scroll down to where it says ‘Code Snippet’)

3. Change the colors to match your brand by adding the hex codes of your brand colors for the background color and the text color

4. Adjust the padding so it's more in line with the padding of the primary button

5. I've left a space for you to add a border radius if you want to—you can change it to 0 if you prefer 90° corners

6. This code snippet will create a button of the last item in your navigation menu

Code Snippet

/* Add a second button to navigation */
  
  nav {
    align-items: center;
}
div.header-nav-item:last-child>a {
    background-color: #ffcfcf;
    color: #46361A !important;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 5px;
}

Was this helpful?

Are you doing to use this on your website or your client’s website? If so, what will you use it for? Share your thoughts in the comments. 👇

---

If you liked this post, you’ll LOVE these:​​

• How to Add a Background Image to the Header in Squarespace

• Change the Hamburger Button Color in Squarespace With CSS

• How to Add a Search Bar Above Navigation in Squarespace 7.1

• Optimize Your Website’s Navigation Menu–Improve Engagement

This page contains affiliate links

My Insta

@jenxwebdesign

Like this post?

Pin It to Pinterest 👇