Hamburger Menu on Desktop Squarespace 7.1

On Squarespace 7.1, adding a hamburger (mobile-style) menu to the desktop view isn’t something you can do natively — but it’s one of the most popular requests I get from clients.

In this tutorial, I’ll walk you through how to do it using a bit of custom CSS.

Code


.header-nav, .header-actions {

display: none;

}

.header-burger {

display: flex;

}

.header--menu-open .header-menu {

visibility: visible;

opacity: 1;

}

Why Use a Hamburger Menu on Desktop?

Sometimes minimal navigation just looks better — especially if your design is modern, mobile-inspired, or CTA-driven. A hamburger menu gives you a clean header and makes room for strong visuals in your hero section.

In previous Squarespace versions (like 7.0), this was easy. But on 7.1, we need to add a few lines of code.

How to Add It (Step by Step)

1. Go to your Custom CSS panel
   (If you can’t find it: press / on your keyboard, type “CSS,” and hit Enter)

2. Paste the code
   You’ll find the full CSS at the top of this blog post

Once you paste the code, your standard nav links and header button will disappear and instead appear inside a fully functional hamburger menu — complete with scrollable links and an optional CTA at the bottom.

Want to Customise It?

This setup is flexible:

• Keep both nav and burger – You can tweak the code to show both.

• Keep the CTA visible – Leave the header button at the top while using the menu for links.

• Play with opacity – Adjust the background opacity of the open menu (from 0 to 1) to match your aesthetic.

Everything is modular, so if your client has specific design preferences, it’s easy to adapt.

Common Issues

• If the burger icon disappears, double-check the part of the code that sets display: flex on the burger.

• Menu not opening? Make sure header-menu is set to display: visible.

Need Help?

Have questions or want this done for you? Get in touch via the links below.

If this was helpful, feel free to explore more tutorials on the blog — and if you’re looking for a Squarespace expert to design your site properly from the start, get in touch with me here →