How to Hide the Hamburger Menu on Mobile in Squarespace 7.1 (Complete Guide)
The mobile hamburger menu is turned on by default on Squarespace 7.1. It works well for sites with a lot of content, such as navigation-heavy websites, but there may be instances when you want to make the menu completely disappear like on landing pages, single-page websites and conversion focused designs.
Unfortunately, there is no built in option to turn the hamburger menu off for mobile.
The good news?
With a little clean, update safe CSS, you can hide the hamburger menu without ruining your website.
Why Hide the Hamburger Menu on Mobile?
Hiding the hamburger menu is often done to:
Create distraction-free landing pages
Focus attention on a single CTA
Simplify one-page websites
Replace navigation with buttons or links
Achieve a cleaner, minimal mobile header
This is especially common for sales pages, funnels, and campaign pages.
Why Squarespace Shows the Hamburger Menu by Default
Squarespace 7.1 headers are:
Responsive by design
Automatically converted to mobile layouts
Controlled globally
Not page-aware on mobile
Because of this, the hamburger menu appears whenever the viewport reaches mobile size.
What This Solution Will Do
By following this guide, your site will:
Hide the hamburger menu icon on mobile
Keep the header layout intact
Avoid layout shifts or broken navigation
Remain SEO- and performance-safe
Work across all Squarespace 7.1 templates
Step 1: Hide the Hamburger Menu Using CSS
Go to:
Website → Pages → Custom Code → Custom CSS
Add the following:
@media only screen and (max-width: 767px) {
.header-burger-btn {
display: none !important;
}
}
What This Does
Targets mobile screen sizes only
Hides the hamburger menu icon
Keeps the header container intact
Prevents accidental menu opening
This is the cleanest and safest approach.
Important Consideration (Usability)
If you hide the hamburger menu:
Users will not have access to site navigation
Make sure important links or CTAs are visible
This works best for single-purpose pages
Never hide navigation on content-heavy sites without alternatives.
Common Mistakes to Avoid
Hiding the entire header instead of just the icon
Removing navigation without a CTA
Applying desktop-only CSS
Forgetting mobile testing
Using JavaScript when CSS is enough
Final Thoughts
Squarespace 7.1 shawl you crop top does not have a built-in setting to remove the mobile menu hamburger, but this CSS solution is elegant and professional. When used purposefully, it enables building focused, conversion-optimized mobile layouts without having to lose the default platform behavior.
FAQ: Hide Hamburger Menu on Mobile in Squarespace 7.1
-
No. Custom CSS is required.
-
No. Desktop remains unchanged.
-
No. CSS-only solution.
-
Yes. Header classes are stable in 7.1.
-
Yes, using page-specific body classes.
