How to Add a Hamburger Menu to the Desktop Version of Your Squarespace Website
If your website’s header navigation is getting cluttered with too many options, it might be time to consider switching to a hamburger menu—yes, the same one typically used for mobile navigation. A hamburger menu on the desktop version of your website can save space, improve user experience, and give your site a clean, modern look.
In this tutorial, I’ll show you how to replace your desktop navigation with a hamburger menu using a bit of simple CSS.
Watch the video
Check out the YouTube video below. 👇🏼
Why Use a Hamburger Menu on Desktop?
A hamburger menu can be a game-changer for websites with:
Too many navigation items: Avoid stacked or overlapping menu options.
Minimalist designs: Achieve a sleek, uncluttered look.
Mobile-inspired layouts: Maintain consistent navigation across devices.
Step-by-Step Guide to Adding a Hamburger Menu on Desktop
Step 1: Check Your Current Navigation
Before you make any changes:
Log in to your Squarespace dashboard.
Navigate to Pages > Main Navigation.
If you have a lot of items in your navigation, you may notice that they start overlapping or spilling onto a second line, especially on smaller screens.
Step 2: Access the Custom CSS Panel
Go to Website > Pages > Website Tools > Custom CSS.
Open the Custom CSS editor. This is where we’ll add the code to create the hamburger menu.
Step 3: Add the Hamburger Menu CSS
Copy and paste the following CSS into the editor:
/* Hamburger Menu on Desktop */
.header-nav, .header-actions {
display: none;
}
.header-burger {
display: flex;
}
.header--menu-open .header-menu {
visibility: visible;
opacity: 1;
}
This CSS does the following:
Hides the regular navigation items:
display: none;removes them from view.Displays the hamburger menu:
display: flex;activates the hamburger icon.Makes the menu clickable:
visibility: visible;ensures users can open and close the menu.
Save your changes, and you’ll notice that the regular navigation has been replaced with a hamburger menu.
Step 4: Customize the Hamburger Menu
To personalize the menu:
Switch to Mobile View in the editor.
Click Edit Site Header > Edit Design > Mobile Menu.
Customize the hamburger menu icon:
Choose from options like three lines, two lines, or the classic “hamburger” with a patty in the middle.
Adjust the thickness of the lines using the slider or by selecting small, medium, or large.
Save your changes.
Additional Tips for Hamburger Menus
Test for Responsiveness: Ensure the menu works well on different screen sizes, including tablets and laptops.
Use Minimalist Icons: Keep the design simple to complement a clean layout.
Check Navigation Usability: Ensure that all menu items are still easily accessible from the hamburger menu.
Wrapping Up
Adding a hamburger menu to the desktop version of your Squarespace website is a simple way to declutter your navigation and enhance user experience. With just a few lines of CSS and some design tweaks, you can give your site a polished, modern feel.
📨 Join my mailing list to get Squarespace tips & tricks right in your inbox
Your Designer
I'm Bryan, a Squarespace web designer and founder of Abound Web Design. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at bryan@aboundwebdesign or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.
