Jump to content

Using Mobile Nav across all devices

Go to solution Solved by inside_the_square,

Recommended Posts



The goal is to use the burger menu across all devices - I've done this on other websites and it's worked just fine. However, the same CSS code that is currently working on other 7.1 websites isn't working here. I've tried a number of similar iterations of code (from this forum, insidethesquare, Bard, and Chat GPT) and none seem to have any effect. 


I'm confused as this seems like a common and simple modification and the site is very much in its infancy and has almost no CSS or code injection. Any help would be appreciated. 


Link to comment

That sounds frustrating!

Can you share some specific details? Website URL, code, somewhere it is working?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Of course, thanks for looking into it.


Website: www.dream.industries 


I've tried a few different codes, but here's one that works on another Squarespace website but seems to have no effect here. 


//use mobile menu on desktop//
.header .header-burger{display:flex} 
.header-nav, .header-actions {display:none} 
.header--menu-open .header-menu { opacity: 1; visibility: visible;}
//end use mobile menu on desktop//

Link to comment
  • Solution

Hey @AJZ I just took a look at your source code and there is some typo/character issue that is blocking your code from rendering after line 35721.

Your code is just fine for 7.1, so something must have carried over from wherever you store your codes. 😬


If  you remove your code & notes, and replace it with this you should be good to go. 

P.S. be sure to add !important for your burger display value change to make sure it's not ignored by the browser. Hope this helps!

/* burger on desktop */
.header .header-burger{display:flex!important} 
.header-nav, .header-actions {display:none} 
.header--menu-open .header-menu { opacity: 1; visibility: visible;}


Code queen and CSS behind InsideTheSquare.co

😃 Free CSS tutorials: insidethesquare.co/tutorials-for-squarespace
🥳 Free 7.1 training course: itssevenone.com/training
👍 CSS Cheat Sheet - codes for 7 & 7.1: insidethesquare.co/css
📚 CSS for Squarespace course: customcodeacademy.com

Link to comment

Wow, I feel like I've just been visited by a celebrity! Thank you so much, love your videos! You've helped me a fair amount over the last few years!


Just went through every other variable I could imagine and found the glitch. The Vimeo video helped.


(My CSS formatting for the calendar was not specific enough.) 

Edited by AJZ
found the bug
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.