[TUTORIAL] Make mobile menu SCROLLABLE

Nic1 · November 15, 2019, 6:58am

Hi @sabanna! The easiest to see the issue would be on an iphone landscape orientation. The same effect with chrome and safari. Thanks for any advice

Nic1 · November 24, 2019, 3:43pm

Hey @sabanna, the rendering between Weblow and the browsers was still different, but I managed to sort this out. Just changing a Div from Flex to Block.

rmjjkj · July 29, 2020, 7:39am

Hi @sabanna,

I’m unsure of how to achieve a mobile scrollable issue with this mega menu. Any thoughts?

https://preview.webflow.com/preview/mega-nav-f52992?utm_medium=preview_link&utm_source=dashboard&utm_content=mega-nav-f52992&preview=233828be3979ff32c909c9de7be64018&mode=preview

sabanna · July 30, 2020, 7:13pm

Hi, @rmjjkj!

To be honest, I would be very unhappy user if I would have to scroll through all those collapsed/opened dropdowns on mobile device (personal preference)

Have you considered making those dropdowns slide in/out from the side on the phone? It would require a custom interactions, but doable.

rmjjkj · July 31, 2020, 6:07am

How would you achieve that with such long lists? Something along these lines? Blueprint: Slide and Push Menus

sabanna · July 31, 2020, 2:59pm

Yes, something like this. You can make it with interactions.

Clement_Joslain · September 23, 2020, 7:49am

Hello @sabanna, thanks a lot for the explanation and raising this issue!

Unfortunately, I am still facing this problem even after trying what you’ve explained.

I have a left bar panel with filter at desktop level. I have created an animation under a setting icon for smaller devices. For some reasons, this menu isn’t scrollable which makes impossible to select the content.

To see the issue, you need to check at the tablet and/or mobile devices to see the div for the animation called “Fixed-Left-Bar” (See screenshot attached)
Basically in a few words, when you’re opening this setting menu with your phone horizontally (not with the webflow preview mode), you cannot scroll down to see all the content (the “Filter solutions by” part in my screenshot).

Because the scroll happens behind on the page, and not on the animation.
Here is my share link: : Webflow - The Matcha Initiative

Any help will be much appreciated,
Best,

sabanna · September 23, 2020, 6:05pm

@Clement_Joslain you would need to give that menu a height (80vh or so) and make it’s overflow scroll

Clement_Joslain · September 24, 2020, 2:18am

Many thanks Sabanna for the quick reply and support! It’s working now

jameslavine · January 14, 2021, 5:57pm

@sabanna I’ve followed your instructions for the drop down menu type (100vh and overflow: auto on the nav menu div), but it’s not working for me. I’m still unable to scroll the mobile menu, only if there is content on the page. If there is no other content on the page, the mobile menu does scroll as expected.

Here’s a link to the site: https://outseta.webflow.io/

Here’s a page with no content, and the scrolling works: https://outseta.webflow.io/nav-test

I’d really appreciate it if you could take a look!

jameslavine · January 14, 2021, 9:36pm

@sabanna Nevermind, I figured it out! I was using min-height instead of height.

AndreaCH · February 2, 2021, 1:20am

Hi @sabanna Thank you so much for the tutorial. Somehow it is not working for me I followed your instructions for Over Left menu but couldn’t make it work.

Here’s a link to my site: Webflow - Acceso Covid

I’d really appreciate it if you can help me with this!

Daren_Perincic · October 21, 2022, 3:16pm

Hi, I still have this issue, I’ve tried following the instruction above but to no avail. Could you please assist me or point what I’m doing wrong?

https://preview.webflow.com/preview/leadiq-8527ff-6da486da36b76a05ad69977d6?utm_medium=preview_link&utm_source=designer&utm_content=leadiq-8527ff-6da486da36b76a05ad69977d6&preview=7bd81cdf06f8c4b55e0aab7e945c3a07&workflow=preview

Thank you for your time!