inunzi Posted September 12, 2020 Share Posted September 12, 2020 Hello. I was wondering if it is possible to have a mobile menu slide in on the left side of my site when someone clicks/taps on the hamburger menu button. I have a video down below to show a better example of what I have in mind. If anyone knows how to do this please reply to my message and let me know how to do it. Thanks! IMG_3795.MP4 Link to comment
tuanphan Posted September 13, 2020 Share Posted September 13, 2020 Can you share your site url? We can check easier. 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
inunzi Posted September 13, 2020 Author Share Posted September 13, 2020 (edited) @tuanphan my site url is inunzi.com Edited September 13, 2020 by inunzi Link to comment
inunzi Posted September 16, 2020 Author Share Posted September 16, 2020 @tuanphan Are you meaning for you to be an admin on my site so that you can help with the code easier? Link to comment
creedon Posted September 16, 2020 Share Posted September 16, 2020 I think @tuanphan just wanted the URL for your site so that anyone who might be able to help can take a look. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
inunzi Posted September 16, 2020 Author Share Posted September 16, 2020 Oh @creedon thanks! But do you think you can help me? This would be very helpful since no one has on this subject yet. Link to comment
creedon Posted September 17, 2020 Share Posted September 17, 2020 (edited) Please see Mobile Menu Flyout. Let us know how it goes. Edited March 7, 2022 by creedon Elise__ and addisonpann 2 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
inunzi Posted September 17, 2020 Author Share Posted September 17, 2020 (edited) Omg thank you! I will test this tomorrow and I will let you know the results! Edited September 17, 2020 by inunzi Link to comment
inunzi Posted September 17, 2020 Author Share Posted September 17, 2020 @creedon it looks very good and I really like it. But is it possible to have a mobile menu this big, and have a space on the side like the one below? Thanks! Link to comment
creedon Posted September 18, 2020 Share Posted September 18, 2020 If I understand what you want correctly, you want the font size to be much smaller on the mobile menu? On the spacing. You want there to be space at the right so that the menu does not cover up the page below? If I have that right, doing that might be difficult. The issue is that on the right side of your site there is a border of white. So making the mobile not take up the whole screen would just reveal white for the most part. Lets work on one issue at a time. Font size first! Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
inunzi Posted September 18, 2020 Author Share Posted September 18, 2020 @creedonThank you! All of those are correct! So to start it off, How can we make the mobile menu font size smaller? Thanks! Link to comment
creedon Posted September 18, 2020 Share Posted September 18, 2020 Here is a crack at the fonts. Add the following to Design > Custom CSS. .header-menu .user-accounts-text-link { font-size: 16px; } .header-menu-nav-folder-content { justify-content: unset; } .header-menu-nav-item a { font-size: 14px; font-weight: 600; padding: 6px; } You can play with the numbers. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
inunzi Posted September 19, 2020 Author Share Posted September 19, 2020 (edited) @creedon The fonts are just as small as needed! I’m very excited for the next step! Thanks! Edited September 19, 2020 by inunzi Link to comment
creedon Posted September 20, 2020 Share Posted September 20, 2020 (edited) 2 hours ago, inunzi said: I’m very excited for the next step! As a starting point add the following to your CSS. .header-menu.header-menu--folder-list { width: 85%; } .header-menu-nav-folder { overflow-y: hidden; } .header-menu-nav-folder:not( .header-menu-nav-folder--active ) { -webkit-transform: translatex( 75% ); -ms-transform: translatex( 75% ); transform: translatex( 75% ); visibility: hidden; } @media screen and (max-width: 767px ) { .header-menu.header-menu--folder-list { width: 75%; } .header-menu-nav-folder:not( .header-menu-nav-folder--active ) { -webkit-transform: translatex( 65% ); -ms-transform: translatex( 65% ); transform: translatex( 65% ); visibility: hidden; } } This is for a 7.1 site. Let us know how it goes. Edited September 20, 2020 by creedon version 2 of CSS Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
inunzi Posted September 20, 2020 Author Share Posted September 20, 2020 @creedon thank you so so much. The only issue is that, the navigation menu is taking up a lot of the menu space. So Do you think you can make the menu go above the navigation menu like the screen shot below? Thanks! Link to comment
inunzi Posted September 26, 2020 Author Share Posted September 26, 2020 @creedon Do you know a fix to this? Link to comment
Leah007 Posted March 2, 2021 Share Posted March 2, 2021 On 9/25/2020 at 10:15 PM, inunzi said: @creedon Do you know a fix to this? If anyone found a fix for this I would be eternally grateful. My site is www.nuligoods.com. And thank you very much for the earlier code, working like a charm! Link to comment
tuanphan Posted March 6, 2021 Share Posted March 6, 2021 On 3/2/2021 at 1:45 PM, Leah007 said: If anyone found a fix for this I would be eternally grateful. My site is www.nuligoods.com. And thank you very much for the earlier code, working like a charm! This will require a lot of code. you can post on some FB groups + Squarespace Customization Resource Groups + Squarespace Community + Squarespace Entrepreneur + Squarespace Rockstars 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
Leah007 Posted March 11, 2021 Share Posted March 11, 2021 I joined them all thank you for the recommendation! And if anyone who is facing the same issue reads this, I ended up doing a workaround kind of cheat where I just reduced the width of the slide out menu so that it didn't get as far as my logo. Since my menu nav items are short titles anyways so they don't take up much vertical space it achieved the look I was going for without any further coding 🙂 Link to comment
Elise__ Posted July 14, 2021 Share Posted July 14, 2021 On 9/20/2020 at 4:31 AM, creedon said: As a starting point add the following to your CSS. .header-menu.header-menu--folder-list { width: 85%; } .header-menu-nav-folder { overflow-y: hidden; } .header-menu-nav-folder:not( .header-menu-nav-folder--active ) { -webkit-transform: translatex( 75% ); -ms-transform: translatex( 75% ); transform: translatex( 75% ); visibility: hidden; } @media screen and (max-width: 767px ) { .header-menu.header-menu--folder-list { width: 75%; } .header-menu-nav-folder:not( .header-menu-nav-folder--active ) { -webkit-transform: translatex( 65% ); -ms-transform: translatex( 65% ); transform: translatex( 65% ); visibility: hidden; } } This is for a 7.1 site. Let us know how it goes. Hi! I really like the code. I was wondering how I can adjust it so it also slides back? It slides open when I click on the menu, but it does not slide back. Thanks! Link to comment
creedon Posted July 14, 2021 Share Posted July 14, 2021 10 minutes ago, EliseSob said: I was wondering how I can adjust it so it also slides back? Please post the URL for the page on your site where you want this effect. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works. We can then take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Elise__ Posted July 14, 2021 Share Posted July 14, 2021 14 minutes ago, creedon said: Please post the URL for the page on your site where you want this effect. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works. We can then take a look at your issue. Hi Creedon, Thank you for your quick response. https://mandarin-violin-mjw7.squarespace.com/config/ password: elise I also noted that the 'contact' button seems to slide from the left corner, whereas the text slides from the left. Is it possible to make the button also slide from the left? Is it also possible to make the navigation titles on the mobile menu appear from top to bottom when the menu slides at the same time? Thanks in advance, Elise Link to comment
creedon Posted July 15, 2021 Share Posted July 15, 2021 4 hours ago, EliseSob said: I was wondering how I can adjust it so it also slides back? It slides open when I click on the menu, but it does not slide back. I have updated my September 16th code post. You'll want to set @sweep-out to true. 3 hours ago, EliseSob said: Is it also possible to make the navigation titles on the mobile menu appear from top to bottom when the menu slides at the same time? Are you thinking some kind of progressive reveal effect where New Page would be seen first, then About and so on? I don't have an immediate thought on that one. If someone has that effect in their bag of tricks feel free to chime in! Elise__ 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Elise__ Posted July 15, 2021 Share Posted July 15, 2021 (edited) 14 hours ago, creedon said: I have updated my September 16th code post. You'll want to set @sweep-out to true. Are you thinking some kind of progressive reveal effect where New Page would be seen first, then About and so on? I don't have an immediate thought on that one. If someone has that effect in their bag of tricks feel free to chime in! Dear Creedon, Thanks a lot! Exactly what I had in mind. Is it maybe also possible to have the whole plane slide in? For example on squarespace.com when you click on the burger the menu slides in from the right like a square. Here you also see the reveal effect of the navigation titles that I had in mind. Maybe @tuanphan has an idea in how to do make the mobile navigation titles reveal from top to bottom? 🙂 Edited July 15, 2021 by Elise__ Link to comment
creedon Posted July 15, 2021 Share Posted July 15, 2021 (edited) @Elise__ I have updated my September 16th code post again. Added a menu items reveal effect. The example from SS got the old brain juices flowing. Let us know how it goes. Edited July 15, 2021 by creedon Elise__ 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. 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