How to Show the Mobile Hamburger Menu on Desktop in Squarespace 7.1 Using CSS
Squarespace 7.1 hides the mobile hamburger menu on desktop screens by default. If you prefer a consistent mobile-first design or want to simplify desktop navigation, you can override this behavior with CSS. This guide shows you how to apply and control the mobile hamburger menu on larger screens with precision and UX best practices.
Why Show the Mobile Menu on Desktop in Squarespace 7.1?
For many websites, simplified navigation on desktop improves clarity, reduces clutter, and supports a consistent user experience across devices.
Benefits of using a hamburger menu on desktop:
Promotes a clean, minimalist layout
Matches the mobile-first navigation style
Works better for sites with 3–5 menu items
Improves usability on smaller desktop and laptop screens
Provides a consistent interface for all users
This approach is especially common on portfolio websites, agency landing pages, and mobile-first brands.
Does Squarespace 7.1 Show a Hamburger Menu on Desktop by Default?
No. Squarespace 7.1 displays:
A hamburger menu on mobile and tablet devices
A horizontal navigation bar on desktop screens
If you want the hamburger menu to appear on desktop, you need to override Squarespace’s default breakpoints using custom CSS.
Limitations of the Default Squarespace Desktop Navigation
Squarespace’s desktop menu isn’t ideal for all layouts. It has the following limitations:
The layout breaks with too many menu items
There's no toggle animation
It lacks vertical spacing control
It offers inconsistent UX across breakpoints
If you value control, flexibility, and a mobile-first structure, the default setup may not meet your needs.
How to Show the Mobile Hamburger Menu on Desktop Using CSS
To display the hamburger icon on desktop, you need to:
Hide the desktop horizontal navigation
Reveal the mobile hamburger toggle
Enable the mobile navigation drawer on larger screens
CSS Code to Force the Hamburger Menu on Desktop
Where to paste:
Go to Design → Custom CSS
Code to paste: `
//Hamburger Nav on Desktop//
.header-display-desktop{
flex-direction: row-reverse !important;
}
.header .header-burger{
display:flex;
}
.header-nav, .header-actions{
display:none
}
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
//menu links font and spacing on desktop only
@media screen and (min-width:768px) {
.header-menu-nav-item a {
line-height: 1.5rem !important;
font-size: 2rem !important;
margin: 1vw 0vw !important;
}
}
You can adjust 1025px to match your theme’s actual desktop breakpoint.
This code hides the standard navigation and activates the mobile menu for desktops.
Where to Add This CSS in Squarespace 7.1
Follow these steps to apply the code globally:
Go to Design > Custom CSS
Paste the code into the editor
Click Save
Optional: Add CSS for Specific Pages
If you only want the change on one page:
Go to Pages > Settings > Advanced
Paste the CSS into the Header Code Injection area
Use a specific .page-id-xxxxx selector if needed
This method gives you control over when and where the hamburger menu appears.
How to Apply the Hamburger Menu Only to Specific Pages or Screen Sizes
You can scope the effect using either page-specific classes or media queries.
Example: Apply to a single page
.page-id-643d32b21b123 .header-nav {
display: none! important;
}
Example: Apply between two breakpoints only
@media screen and (min-width: 768px) and (max-width: 1280px) {
.header .header-burger {
display: block! important;
}
}
Use the browser’s “Inspect” tool to find your page ID or check your Squarespace source code.
Styling tips:
Increase the padding for better clickability
Use transitions for smooth animation
Match your brand’s fonts and spacing
Ensure the icon is always visible and not hidden behind banners or overlays
This improves usability and maintains design harmony.
What Happens to Your Layout When You Use the Mobile Menu?
Replacing the desktop menu changes the user interface. Here's what to expect:
Navigation becomes centered and toggle-driven
Horizontal space is freed up in the header
Menu links are shown only when needed
The layout feels less cluttered, especially on smaller screens
Keep the hamburger icon visible and intuitive, and don’t hide it behind other visual elements.
Common Problems and How to Fix Them
The hamburger icon doesn't appear
Cause: Display not overridden
Fix: Use display: block! important; in your CSSClicking the icon doesn't open the menu
Cause: JS toggle not activated on wider screens
Fix: Ensure Squarespace’s JS runs regardless of screen widthMenu overlaps content
Cause: Missing spacing adjustments
Fix: Add appropriate padding or margin to header containers
Use browser developer tools to test and tweak styles on different devices.
When Should You Use a Hamburger Menu on Desktop?
Use the hamburger menu on desktop when:
Your site design follows a mobile-first strategy
You have a few navigation links
You want to maintain visual minimalism
You want users to focus on content instead of navigation
You’re working with one-page layouts or conversion-driven pages
For large-scale websites or complex menus, it’s better to use a traditional desktop navigation bar.
How to Revert to the Default Desktop Navigation
If you need to undo the hamburger menu:
Steps to revert:
Go to Design > Custom CSS
Remove or comment out the hamburger menu code
Save your changes
Optional CSS to restore the default menu:
@media screen and (min-width: 1025px) {
.header-nav {
display: flex! important;
}
.header-menu-toggle,
.mobile-nav {
display: none! important;
}
}
Always preview the layout before publishing changes.
Frequently Asked Questions (FAQ)
1. Can I use the Squarespace mobile menu on desktop without code?
No. Squarespace 7.1 does not offer a built-in option to display the mobile hamburger menu on desktop. Custom CSS is required to override the platform’s default breakpoint behavior.
2. Will enabling the mobile menu on desktop affect SEO?
Not directly. Navigation changes don’t affect rankings as long as all important links remain crawlable. However, improving mobile-first consistency and UX can reduce bounce rate, indirectly supporting SEO performance.
3. Is it safe to use? important in Squarespace CSS?
Yes, if used selectively. Squarespace’s built-in CSS is often required! important to override default styles. Use it only when necessary to avoid conflicting styles or unintended overrides.
4. How can I test if my hamburger menu works on all devices?
You can test it using
Chrome DevTools → Toggle device toolbar
Responsive testing tools like BrowserStack or Responsively
Manual testing on physical devices
Always check desktop, tablet, and mobile viewports before going live.
5. Can I animate the hamburger icon in Squarespace?
Yes, using custom CSS or JavaScript.
You can animate transitions with CSS transform or use JavaScript to add classes on toggle. For accessibility, include ARIA attributes and keyboard interaction support.
