Squarestuff

Share this post

How to show mobile menu on desktop in Squarespace 7.1

www.carljohnson.space

Discover more from Squarestuff

Web development, motion graphics and all kind of other ...stuff!
Continue reading
Sign in

How to show mobile menu on desktop in Squarespace 7.1

Carl Johnson
Mar 16, 2023
Share this post

How to show mobile menu on desktop in Squarespace 7.1

www.carljohnson.space
2
Share

One of the biggest things missing from Squarespace 7.1 is the mobile breakpoint option. Back in the days of version 7, it was easy to show your mobile menu on desktop - just by dragging the breakpoint slider.

In 7.1, though, with that slider gone, so is the option to easily achieve this.

Luckily it can be done with a little bit of code.

So first you’re going to need to head to your CSS Editor in Squarespace (Design > Custom CSS)

Then take a copy of this CSS 👇

.header-nav {
    display: none;
}
.header-actions {
    display: none;
}
.header-burger {
  display: flex;
}

.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}

Then paste it into the CSS editor and hit ‘Save’.

And that’s it!


Show support

Buy me a coffee

Share

Share this post

How to show mobile menu on desktop in Squarespace 7.1

www.carljohnson.space
2
Share
Previous
Next
2 Comments
Share this discussion

How to show mobile menu on desktop in Squarespace 7.1

www.carljohnson.space
Alexander
Apr 27

Hi Carl, is there any way I can make the menu on the right side of the screen only, without the logo overlapping the menu?

Expand full comment
Reply
Share
1 reply by Carl Johnson
1 more comment...
Top
New
Community

No posts

Ready for more?

© 2023 Carl Johnson
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing