How to add a second button to your Squarespace menu

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

---

About This Tutorial

This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

Ever wished you could squeeze just one more button into your site's main menu? Well, you're in luck! In this tutorial, we're going to unlock a little-known Squarespace superpower: adding a second button to your navigation using some nifty custom CSS.

Now, before you start thinking, "CSS? That sounds complicated!" – take a deep breath. I promise to break it down into bite-sized, easy-to-follow steps that even CSS newbies can handle. We'll start with the basics of pasting our magic code, and then I'll show you how to customize it to match your site's unique style. Want to change colors? Adjust padding? Add a cool hover effect? We've got you covered!

The best part? This hack works for both your desktop and mobile menus, so your site will look sleek and professional on every device. I've dropped the custom codes below for you to use, but make sure to watch the full video tutorial. Trust me, you'll want to see exactly how to tailor these codes to your specific Squarespace site.

Squarespace Tutorial

---

Code Example

Here is the main code from this tutorial. I want to encourage you to get creative here; try adding a border, maybe a gradient background, or curve the corner with a border radius! Your only design limit is your imagination ✨

.header-nav-item:last-of-type:not(.user-accounts-text-link),
 .header-menu-nav-item:last-of-type:not(.customerAccountLoginMobile) a{
  background:red;
  padding: 5px;
  margin-top: -5px
}
.header-nav-item:last-of-type:not(.user-accounts-text-link):hover{
background: pink
}

---

Related Content

👯‍♂️ Member Login Button Tutorial → https://insidethesquare.co/squarespace-tutorials/member-login-button

📖 Learn custom code basics → https://insidethesquare.co/learn

📚 Squarespace CSS Code Collection → https://insidethesquare.co/css

🙋‍♀️ Code troubleshooting tips → https://insidethesquare.co/code-help