Replace Site Navigation with a Hamburger Menu on Desktop Squarespace 7.1 Website

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.

Add in the following code:

.header-nav, .header-actions{
  display:none;
}

.header-burger{
  display: flex;
}

.header--menu-open .header-menu{
  visibility: visible;
  opacity:1;
}

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.