Streaming live at 10am (PST)

[TUTORIAL] Make mobile menu SCROLLABLE

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 :blush:

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.

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

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.

How would you achieve that with such long lists? Something along these lines? https://tympanus.net/Blueprints/SlidePushMenus/

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

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. :frowning:

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: : https://preview.webflow.com/preview/the-matcha-initiative?utm_medium=preview_link&utm_source=designer&utm_content=the-matcha-initiative&preview=d3dee369b5e46040b485859ffdba891b&pageId=5eead33eed90a99425ee7f5e&itemId=5f602d355d6170a69e9b0032&mode=preview

Any help will be much appreciated,
Best,

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

1 Like

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

@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: Nav Test

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

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

1 Like

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!