Jump to content

How to add "Hamburger" Icon Navigation for both Desktop and Mobile Versions of Website?

Go to solution Solved by Ziggy,

Recommended Posts

Hello everyone, I am making a website in 7.1 and saw that within the settings I was unable to change the navigation type of my desktop side to the menu or "hamburger" icon style. The mobile version consolidates all navigation titles into said pop-up menu by default. 

Is there a setting I am not seeing, or is this exclusively a CSS-enabled option?

desktop without icon option.png

mobile icon.png

Link to comment
  • Replies 4
  • Views 7.9k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

This is not something that is built in to Squarespace's functionality, but can be achieved with plugins, there are lots of solutions that can be found, this is one that I've had success with:

https://www.ghostplugins.com/products/mini-mobile-menu-in-squarespace-71?peachs_apc=squarefortytwo (affiliate)

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?

Link to comment
  • Solution

@pietro445 There are ways to do that in Squarespace 7, but the method varies depending on your template, this may be a starting point for you:

 

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?

Link to comment

Thanks Ziggy!
I just found another website with a pretty cool work around. HERE

For Squarespace 7.0 if you go to Design > Site Styles > Search "Mobile" in the Search Bar
and manually change the "Mobile Break Point" (type a number like 5000px), it will default the mobile navigation view to desktop.

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.