Streaming live at 10am (PST)

[TUTORIAL] Make mobile menu SCROLLABLE

thanks for sharing this secret!

1 Like

I’m struggling here. I went for the easy option at the top with the fixed height and set overflow to auto: https://preview.webflow.com/preview/sunlover?preview=18afe8864b21c952d74d6e2242cd0185

Can you please let me know where I am going wrong? Thanks! on mobile I cannot scroll.

Thank you for sharing this tip.

Thank you for posting this @sabanna. It’s working fine for me.

I’d like to hide the scrollbar and still have the menu scrollable. Something like they have on https://www.washingtonpost.com/
Do you know how to do it please?

Thanks

Hi, @bubble!

It is hard to give clear advice without seeing your project. Could you share you read-only link here?

Best,
Anna

Hi @sabanna,
thanks so much for this small tutorial. Somehow it is not working for me and the menu is not scrolling. Any ideas why?

https://preview.webflow.com/preview/eciu?preview=6118c573d1fe0933e30cd60863d1a9bf

Hi @creatspot!

Sorry for the delay. Could you also give me the link to the published version of that site, please? You can PM it to me if it can’t be shared publicly.

Hi @sabanna, no problem :slight_smile:
The link is https://www.eciu.org/

Hi, @creatspot
Change the overflow settings on the NavMenu and it should fix your problem:

58%20AM

Best regards,
Anna

@sabanna Just changed it on the live site, but still not working. Any ideas?

Do I understand correct you are talking about this menu?

CloudApp

yes – exactly! How come that it works for you? I tested on my iphone 7 and a small browser window in Chrome but it is not working for me :thinking: Also doesn’t work for me in the inspector.

Okay, lets try to clean up this part first.

CloudApp

You have 2 navbars, but i seems that both of them are set to show up on tablets and mobile devices. If you really need both of them, please make sure only one are set to visible on each type of devices

Then we will go to the next step and figure out why scroll doesn’t work

Hi @sabanna yes you are right it became quite a mess. I just reduced it to one nav but the background is still scrolling.

I also think, since the navigation items are quite a lot, I will hide the desktop navbar and replace it with 5 dropdowns where you can then select the indivual page set. What do you think?

This would be an interesting solution

@sabanna what would be your approach? Would you rather build it with four different navs, dropdown elements or interactions?

Is there any approach that works for Sticky headers instead of just Fixed header?

Hey @sabanna,

This works in Webflow preview and even in the Sizzy app, but not on device browsers.

Thanks for any ideas?

Project:
https://preview.webflow.com/preview/coresite2?utm_medium=preview_link&utm_source=designer&utm_content=coresite2&preview=33d0cfc24ff402a47827c618c2795542&pageId=5da85b75ad42af236f72b3d8&mode=preview

Hi, @Nic! What is the actual device and browser?