Jump to content

Using Mobile Nav across all devices

By AJZ, in Customize with code

Go to solution Solved by inside_the_square,

Recommended Posts

AJZ Level 5

AJZ

Posted
Posted

Hi,

 

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. 

 

  • Replies 4
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Ziggy
Ziggy

That sounds frustrating! Can you share some specific details? Website URL, code, somewhere it is working?

inside_the_square
inside_the_square

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 mus

AJZ
AJZ

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

Ziggy Level 14

Ziggy

Posted
Posted

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: https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
⬛ SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
✨ Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

☕ Did I help? Buy me a coffee?

AJZ Level 5

AJZ

Posted
  • Author
Posted

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//

  • Solution
inside_the_square Level 9

inside_the_square

Posted
  • Solution
Posted

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. 😬

https://vimeo.com/865155812/e356e70256?share=copy

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;}

 

🤓 Creator of InsideTheSquare.co
✨ SQUARESPACE CIRCLE LEADER✨ SQUARESPACE EXPERT ✨ SQUARESPACE EMPLOYEE EDUCATOR ✨ CERTIFIED CUSTOM CODE EXPERT ✨

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
⭐️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

AJZ Level 5

AJZ

Posted
  • Author
Posted (edited)

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

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources