How to Show a Squarespace Hamburger Menu on Desktop
Does your Squarespace navigation start to look crowded when you make the browser window smaller? A large logo, several page links, and a header button can leave very little room before the menu wraps onto another line.
Showing a Squarespace hamburger menu on desktop can help at those in-between widths. Instead of squeezing the links together, you display the menu icon and let visitors open the navigation when they need it.
This tutorial explains how to use your existing Squarespace 7.1 menu within a chosen screen-width range. You’ll add a short CSS snippet, adjust the breakpoint, and check that visitors can still reach every important link.
Does Squarespace Already Have a Hamburger Menu?
Squarespace 7.1 adapts to mobile layouts automatically and includes mobile navigation settings. You can style the menu through the header editor. Squarespace’s mobile guidance, navigation styling guide.
You do not need to build a new menu from scratch for this tutorial. The CSS changes the visibility of existing header elements.
The focus here is making that menu appear at wider viewport sizes, where your desktop links might otherwise become crowded. It is not a guide to creating a separate menu with custom HTML or JavaScript.
When Is a Desktop Hamburger Menu Useful?
This approach is worth considering when your header has enough room on a large monitor but becomes cramped on a smaller laptop or tablet.
It can also suit a simpler visual style, but hidden navigation is not automatically easier to use. Visitors need to open the menu before they can see its links.
Before changing the layout, consider whether shorter navigation labels or fewer top-level items would solve the problem. If your full navigation already fits comfortably, there may be little reason to hide it.
For a service business, keep the next step clear. A cleaner header should still make it easy to find your services and contact options.
Step 1: Check Your Existing Menu
Open your website and check its mobile menu before adding the CSS. Confirm that the links work and that visitors can open and close it.
This tutorial is intended for a standard Squarespace 7.1 header using the classes shown below. Existing header customizations may affect the result.
Also note any header actions you rely on, such as a booking button, account link, or social icons. The supplied code hides the matching header actions container within the chosen width range. It does not move those elements into the open menu.
Step 2: Add the Hamburger Menu CSS
Open the Custom CSS panel and back up your existing code. Paste the complete snippet below outside any existing CSS rule, then save. Squarespace’s Custom CSS guide.
Use the complete version with the media query. Adding the inner rules separately would apply them without the same width restriction.
@media screen and (min-width: 641px) and (max-width: 1200px) {
.header-nav,
.header-actions {
display: none;
}
.header-burger {
display: flex;
}
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}This is your original code, with its selectors, values, and breakpoints preserved.
The snippet is intended to:
Hide the matching desktop navigation and header actions.
Display the existing hamburger control.
Reveal the menu layer when Squarespace applies its menu-open class.
Squarespace’s existing interaction controls the opening and closing. CSS alone does not create that behavior.
Check the result before relying on it: this snippet has not been tested on your live website. Different header layouts, platform changes, or more specific CSS rules may require adjustments.
Step 3: Understand the 641–1200px Range
The media query applies from 641px through 1200px, inclusive, measured in CSS viewport pixels.
It does not simply mean “every screen smaller than 1200px.”
Below 641px and above 1200px, these rules stop applying. Your existing Squarespace styles and other CSS determine the layout at those sizes. Browser media queries use conditions such as viewport width to decide when rules apply. MDN’s media-query guide.
For example, if the header starts becoming crowded around 1300px, you could change the opening line to:
@media screen and (min-width: 641px) and (max-width: 1300px) {Keep the rest of the rule and its closing brace in place.
That is an optional breakpoint adjustment. Choose the value based on your actual header rather than assuming 1200px is right for every website.
Step 4: Test the Menu at Different Widths
Open the site outside editing mode and gradually narrow the browser window. Use your actual navigation links; there is no need to add extra pages just to test the effect.
Pay particular attention to the transition around 641px and 1200px.
Check that:
The hamburger is visible and can open and close the menu.
Navigation links and any folder submenus work.
Important actions, such as booking or account access, remain available somewhere appropriate.
Test on a real phone or tablet too. Open the menu, rotate the device, and resize the desktop window while the menu is open. These checks can reveal problems that a static preview misses.
Use the keyboard as well. Tab to the menu control, try activating it, move through the links, and check that focus remains visible and you can close the menu without a mouse. The snippet does not add keyboard behavior, so verify the existing interaction.
Step 5: Match the Menu to Your Header
Once the behavior works, review the menu icon and open-menu styling.
In the header editor, switch to mobile view to access the menu icon settings. Squarespace provides controls for the icon style and line thickness. Available controls can vary with the header configuration. Squarespace’s header guide.
Keep the icon easy to recognize against the header background. Check it on pages with different background colors or imagery.
You do not need extra animation to make the menu feel polished. Clear labels, readable text, and consistent spacing are more useful than an elaborate transition.
Common Problems to Check
1. The Navigation Disappears, but the Hamburger Does Not Show
Confirm that the complete snippet is saved and that the browser width is inside the specified range.
A more specific existing style, a hidden parent element, or different header markup may prevent the control from appearing. Restore the original navigation while resolving the conflict rather than leaving visitors with no visible menu.
2. My Header Button Has Disappeared
The code includes .header-actions in its hiding rule. If your button sits inside that container, hiding it is expected.
If you want to keep those actions, an optional change is to remove .header-actions from the first selector group, leaving:
.header-nav {
display: none;
}Replace only the first rule inside the media query, then check the spacing again. Keeping more elements visible may bring back the crowding you were trying to solve.
3. The Menu Opens, but Some Links Do Not Work
Test folder navigation and links individually. Making a menu layer visible does not guarantee that every interaction works correctly at the wider viewport.
Existing custom code can also interfere. If the open menu is unusable, remove the snippet until the header can be adjusted for your setup.
Frequently Asked Questions
-
This tutorial targets the standard Squarespace 7.1 header elements shown in the code. It is not based on choosing a special template with a unique menu feature. If you use Squarespace 7.0 or a substantially customized header, you may need different code.
-
The rules apply only between 641px and 1200px. They do not apply below 641px, but some tablets and landscape phones may fall inside the range. Think in terms of viewport width rather than desktop and mobile device labels.
-
Yes, you can increase the maximum width to include more desktop sizes. Start with the width at which your navigation becomes crowded and test from there. Removing the upper limit would make the rules apply at every width of 641px or greater, which is a different design choice from the original example.
-
Treat this as a navigation layout change, not a ranking technique. It may help a crowded header, but adding a hamburger icon does not guarantee an SEO benefit. Keep important pages accessible and make sure the menu works before judging the change by its appearance
Final Thoughts
A hamburger menu can be useful when your navigation needs more room than the header can offer. The right breakpoint lets you keep visible links where they fit and use a compact menu where they do not.
Keep the design practical. Check the links, review the header actions, and make sure visitors can get where they need to go on every screen size.
Building or improving a Squarespace website? Book a free call with me to discuss your website, goals, and the improvements you have in mind. Whether you need help refining your header or planning a complete redesign, I can help you create a professional Squarespace website that reflects your brand and encourages visitors to take action.
