Hamburger menu on desktop Squarespace 7.1

Traditionally, hamburger menus are used on the mobile version of a Squarespace website, but sometimes web designers may want to use them on a desktop version too. 

Hamburger menus are a great way of creating a minimalist design and mean you don’t need to display every menu item across the top of the page. 

Opting for a hamburger menu helps to declutter the hero section and is often used by those looking to create a streamlined and design-led website. 

Adding a hamburger menu to a desktop website used to be something that you could do natively on Squarespace, however now it requires some custom code. 

There are actually various pieces of code you can use to achieve a hamburger menu on desktop, varying in complexity and results. What I’m about to talk you through is the simplest way of adding a hamburger menu to a desktop Squarespace website whilst still delivering great results.

Watch the video

Check out the YouTube video below 👇

How to add a hamburger menu to a desktop Squarespace website

Once you’ve got your traditional desktop menu set up and linking to the pages you want it to, head to your edit dashboard and your Custom CSS panel. 

Add in the following code:

.header-nav, .header-actions {

display: none;

}

.header-burger {

display: flex;

}

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

visibility: visible;

opacity: 1;

}

---

📩 Join the inner circle to get exclusive code updates

---

So, let’s talk through that code. 

The first section, header-nav, refers to the existing menu, therefore setting it to display;none will, of course, remove it from display. 

The middle section, header-burger, adds in the burger menu to the desktop version of your website whilst the final sedition, header-menu-open, means that the burger menu will open up once clicked on. 

There are three sections to this piece of code, but each one is essential to adding the burger menu to your desktop website and ensuring it displays and functions correctly. 

Once you’ve added this in, hit save. 

Adding code to your Squarespace website doesn’t need to be daunting and you can check out the rest of my Squarespace resources to help you get to grips with adding custom code to your website.

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?