Hamburger menus are widespread on many mobile websites these days. In this post, I will reveal how you can have a hamburger menu on desktops and large monitors.
What is a hamburger menu?
Hamburger menus are widespread and are almost the default way to navigate mobile websites. As seen in our Squarespace templates, they are the three horizontal lines that make up a link to open the menu. Some have two lines, and some have four, but that's rare; hamburger menus, in their majority, are three lines. You can see on Checked Analytics that the hamburger menu is in use on all devices - mobile and desktop.
Squarespace hamburger menus
Like most websites, the mobile view on Squarespace utilises a Hamburger menu. It's been this way for many years now. What is not commonly seen is a hamburger menu in Squarespace desktop view. In the code below, I will reveal what is needed to make a hamburger menu work on your Squarespace desktop websites.
When should you use a hamburger menu?
Historically, people are not used to seeing a hamburger menu on desktop, laptop or large display device, so some thought needs to go into this. However, as people are used to ubiquitous hamburger menus on mobile devices, it's ok to use these in 2025 on larger than mobile devices. Ten years ago, people were just coming to terms with what those three horizontal lines meant. Now, though, as people's skills and confidence in browsing websites have increased, hamburgers menus are recognised and, therefore, can be used safely on mobile, desktop and large-scale devices.
Warning about Hamburger menus?
One of the issues with hamburger menus is that they hide the navigation from immediate view. You have to click on the hamburger to reveal the further links to click and go to the next page. This is a factor to be considered and is probably a no-no for the hard-nosed UX(User Experience) stalwarts.
Truth to be told, we were a little hesitant about implementing this on Checked Analytics, but the client was quite adamant they were aware of the downside - that the navigation behind a hamburger isn't as easily accessed. Sometimes, you just have to accommodate clients' requests, but we are happy with how it's turned out. It's a super clean look, and it fits with what they are trying to do with a minimal and effective website aesthetic.
Finally, the code for a hamburger menu in Squarespace that works in desktop view
Copy and paste this into your Custom CSS section in the Squarespace admin. If you have a lot in your CSS file, add this menu code near the top, you may need to organise the code.
.header-burger { margin-top:15px;display: flex;z-index: 1004; position: relative} /* show the mobile nav above background pseudo */
.header-nav { display: none !important;} /* hide desktop nav */
.header .header-announcement-bar-wrapper,
.header-inner{ z-index: auto; } /* hide the logo */
.site-wrapper .header-menu .header-menu-bg { background-color: transparent !important; /* Hide background so pseudo can be seen an animated */}
.header-menu .header-menu-nav{ z-index: 1005; position: relative;} /* this is to put nav items above psuedo */
.header-menu { padding-top:0 !important; } /* Removes the js added padding */
.header--menu-open .header-menu { opacity: 1; visibility: visible;}
.header-menu:after { right:0;top:-100%; z-index:1003;position:absolute; content:""; width:100%; height:100%; background-color: ~"hsla(var(--lightAccent-hsl),1)" !important; } /* offsets pseudo element so can be animated */
.header--menu-open .header-menu:after {top:0; transition:.5s;} /* When menu opened animate in */Essentially, we are just keeping the desktop menu with display:none. Most of the code adds a slight animation to a pseudo selector with a background colour. This can, of course, be modified to your own preferences, but I've tried to balance the trade-off of showing as little code as possible but adding a slick animation and polish.
If you have any questions, don't hesitate to ask me / DM me on Twitter/X.