dcbachar Posted December 1, 2021 Share Posted December 1, 2021 Site URL: https://dylansoffice.com/ I'm trying to adjust the mobile menu of my website with Squarespace 7.0.... I know I know. The 7.1 gang will be coming for me but I don't want to go through the process of recreating my site. - I'd like the mobile menu to resemble the desktop version... No more need for the current menu button in the top right corner that opens a navigation display. I'd prefer a straightforward dropdown menu when the main pages are tapped, the secondary page links dropdown below. Just like on a desktop browser. Link to comment
Beyondspace Posted December 1, 2021 Share Posted December 1, 2021 2 hours ago, dcbachar said: Site URL: https://dylansoffice.com/ I'm trying to adjust the mobile menu of my website with Squarespace 7.0.... I know I know. The 7.1 gang will be coming for me but I don't want to go through the process of recreating my site. - I'd like the mobile menu to resemble the desktop version... No more need for the current menu button in the top right corner that opens a navigation display. I'd prefer a straightforward dropdown menu when the main pages are tapped, the secondary page links dropdown below. Just like on a desktop browser. Is it the result you want to achieve on mobile Try @media only screen and (max-width: 767px) { #mobileMenuLink { display: none !important; } .desktop-nav { display: block !important; } } Let me know how it works on your site Press 👍 or mark this answer as solution to help another one too dcbachar 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
dcbachar Posted December 1, 2021 Author Share Posted December 1, 2021 9 hours ago, bangank36 said: Is it the result you want to achieve on mobile Try @media only screen and (max-width: 767px) { #mobileMenuLink { display: none !important; } .desktop-nav { display: block !important; } } Let me know how it works on your site Press 👍 or mark this answer as solution to help another one too This works great! Thank you so much. Any chance the mobile menu/navigation text could be larger without affecting desktop version? Link to comment
Beyondspace Posted December 1, 2021 Share Posted December 1, 2021 9 minutes ago, dcbachar said: This works great! Thank you so much. Any chance the mobile menu/navigation text could be larger without affecting desktop version? Add the font-size to your nav a .main-nav a { font-size: 20px; } Make sure it is wrapper in my previous breakpoint code for mobile Hope that it can help you dcbachar 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
dcbachar Posted December 1, 2021 Author Share Posted December 1, 2021 2 hours ago, bangank36 said: Add the font-size to your nav a .main-nav a { font-size: 20px; } Make sure it is wrapper in my previous breakpoint code for mobile Hope that it can help you This worked perfectly. Thank you! Beyondspace 1 Link to comment
Beyondspace Posted April 25, 2022 Share Posted April 25, 2022 On 12/1/2021 at 10:46 PM, dcbachar said: This works great! Thank you so much. Any chance the mobile menu/navigation text could be larger without affecting desktop version? You can try the following code @media only screen and (max-width: 767px) { #mainNavigation ul li { display: list-item !important; } } Let me know how it works on your site BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
dcbachar Posted April 25, 2022 Author Share Posted April 25, 2022 Perfect! Thank you! Is it possible to have the menu collapse after selecting a sub-menu item? 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