TannerSMay Posted November 15, 2023 Share Posted November 15, 2023 I was wondering if it could be possible to have a menu (hamburger) button for my site navigation on desktop in 7.1? I've added css in previous versions with no problem. I would like to have the menu icon in right corner. When clicked, the menu section fill 1/3 right side of the page, with accompanying icons (see attached). Thanks in advance! Link to comment
Ziggy Posted November 15, 2023 Share Posted November 15, 2023 You can do that with a plugin: https://www.ghostplugins.com/products/mini-mobile-menu-in-squarespace-71 Icons are also possible, there are lots of guides available, this one looks good: https://www.beatrizcaraballo.com/blog/navigation-links-icons 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
TannerSMay Posted November 20, 2023 Author Share Posted November 20, 2023 Thanks for these guides. Do you know how I could customize the plugin to have the menu slide in from the right instead of left? Appreciate any help. Link to comment
Solution TannerSMay Posted November 20, 2023 Author Solution Share Posted November 20, 2023 Highly recommend this plugin: https://schwartz-edmisten.com/plugins/p/hamburger-menu-on-desktop-in-71 Link to comment
JohnBerg Posted May 9 Share Posted May 9 I just added some custom CSS and it seems to be working. It could probably use a few tweeks. .header-nav-list { display: none; } .header-display-desktop .showOnMobile { display: flex; } .header .header-burger { margin-right: 0; align-items: flex-end; justify-content: flex-end; flex: 0 0 50px; width: 50px; } .header-burger { display: flex; } .header--menu-open .header-menu { opacity: 1; visibility: visible; } Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment