Guest Posted September 1, 2020 Share Posted September 1, 2020 Site URL: https://ellifischer.de Hello, I have already tried a lot of things, but have not yet come to a result. I would like the mobile menu not to open over the whole page when you click on it, but only so far that you can see the menu items and the X, from the right. The X should be in the top right corner. The rest of the website should still be visible. I get it with the code: .mobile-overlay-menu { width: calc(~"70% - 60px"); } that the menu does not cover the entire page, but neither transparency. Can anybody help me? Thaaanks! Link to comment
Beyondspace Posted September 1, 2020 Share Posted September 1, 2020 Maybe this is what you want, site wide (adds to all pages). Settings -> Advanced -> Code Injection <style> .is-mobile-overlay-active .Mobile-overlay-menu { width: calc(70% - 60px); } .is-mobile-overlay-active .Mobile-overlay { background: transparent !important; } .is-mobile-overlay-active .Mobile-overlay-nav--primary:before { display: none; } .is-mobile-overlay-active .Mobile-overlay-close { left: auto; right: 0; } </style> BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 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
Guest Posted September 1, 2020 Share Posted September 1, 2020 Wow! Thanks! It works and looks so good! Just a little problem: when clicking the x for closing, it jumped for a second to the left side before closing. Is it something that can be fixed with coding? thanks so much for your help! Link to comment
Beyondspace Posted September 1, 2020 Share Posted September 1, 2020 Try to use this <style> @media (max-width: 640px) { .Mobile-overlay-menu { width: calc(70% - 60px); } .Mobile-overlay { background: transparent !important; } .Mobile-overlay-nav--primary:before { display: none; } .Mobile-overlay-close { left: auto !important; right: 0 !important; } } </style> BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 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
Guest Posted September 1, 2020 Share Posted September 1, 2020 This is amazing! it works! Thank you so so much! 🤗 Link to comment
RossHarrison_1313 Posted December 3, 2020 Share Posted December 3, 2020 Hi. Does this work with 7.1? Link to comment
Beyondspace Posted December 3, 2020 Share Posted December 3, 2020 1 hour ago, RossHarrison_1313 said: Hi. Does this work with 7.1? you should post your site url BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 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
RossHarrison_1313 Posted December 3, 2020 Share Posted December 3, 2020 53 minutes ago, bangank36 said: you should post your site url hey @bangank36 my site is https://flatworm-finch-f4nw.squarespace.com/config/pages Thanks so much for your help Link to comment
tuanphan Posted December 6, 2020 Share Posted December 6, 2020 On 12/3/2020 at 9:06 PM, RossHarrison_1313 said: hey @bangank36 my site is https://flatworm-finch-f4nw.squarespace.com/config/pages Thanks so much for your help I see your header is transparent. Do you still need help? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.