Show Hamburger Menu EARLIER on Squarespace
If you’ve seen my popular tutorial on how to add a hamburger menu to your desktop in Squarespace, you already know how helpful this feature can be.
However, I often hear from clients who don’t want the hamburger menu to appear immediately, they want their full navigation visible on larger screens, but they also need a solution for when the navigation becomes too wide and starts to look messy on smaller screens.
In this post, I’ll walk you through a simple way to make your Squarespace navigation responsive, keeping the full menu visible on larger screens and switching to a hamburger menu when space runs out.
The Problem: Large Navigation Menus Can Break on Smaller Screens
Let’s say your website has around 10 links in the header menu. It might look fine on large monitors, but as the screen size shrinks, like on tablets or small laptops, the navigation may wrap onto two lines. This “double-decker” navigation is not only unattractive, but it can also confuse visitors and disrupt the overall user experience.
The solution? Use a hamburger menu that appears only when the screen size requires it.
Want a framework for designing the perfect homepage?
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
The Solution: Responsive Hamburger Menu with CSS
Here’s a step-by-step guide to implementing this on your Squarespace site:
1. Add the Hamburger Menu Code
Go to Pages > Custom Code > Custom CSS in your Squarespace dashboard.
Paste in the usual hamburger menu CSS code.
.header-nav,
.header-actions {
display: none;
}
.header-burger {
display: flex;
}
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
2. Use a Media Query for Screen Size
The key to making this work and appear on certain screen sizes is the media query. For example:
@media screen and (min-width: 641px) and (max-width: 1200px) {
}
This ensures that the hamburger menu only appears when the screen width is less than 1200px. On larger screens, your full navigation remains visible.
Testing and Adjusting the Breakpoint
Here’s what you need to do next:
Add several navigation links to simulate a large menu.
Test your site by gradually reducing the browser window width.
Watch for the point where your menu wraps onto two lines.
Let’s say the menu starts wrapping at around 1150px. You can adjust your media query to trigger the hamburger menu just before this happens, such as at 1150px or even 1100px.
For example:
@media screen and (min-width: 641px) and (max-width: 1100px) {
.header-nav,
.header-actions {
display: none;
}
.header-burger {
display: flex;
}
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}
This way, your navigation will always look clean and professional, switching to the hamburger menu right when it’s needed.
Why This Matters for Squarespace Users
If you have a large header menu on Squarespace, this responsive hamburger menu solution:
Keeps your desktop design clean
Prevents awkward double-line menus
Improves user experience across devices
Makes your site look more polished and modern
It’s a simple tweak that can make a big difference!
Final Tips
You can adjust the breakpoint (the screen width where the menu switches) based on your specific navigation size.
Always preview your changes on multiple devices or screen sizes to ensure a smooth transition.
