[TUTORIAL] Make mobile menu SCROLLABLE

Corey_Capozzi · April 7, 2017, 3:02pm

thanks for sharing this secret!

Fagan_Wilcox · July 9, 2017, 6:24am

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.

HaBen · July 10, 2017, 12:32pm

Thank you for sharing this tip.

bubble · October 21, 2017, 4:39pm

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

sabanna · October 23, 2017, 3:02pm

Hi, @bubble!

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

Best,
Anna

creatspot · February 26, 2018, 4:49pm

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

sabanna · February 28, 2018, 6:43pm

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.

creatspot · March 1, 2018, 9:53am

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

sabanna · March 1, 2018, 2:38pm

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

58%20AM

Best regards,
Anna

creatspot · March 1, 2018, 2:42pm

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

sabanna · March 1, 2018, 2:45pm

Do I understand correct you are talking about this menu?

creatspot · March 1, 2018, 2:55pm

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 Also doesn’t work for me in the inspector.

sabanna · March 1, 2018, 3:25pm

Okay, lets try to clean up this part first.

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

creatspot · March 1, 2018, 5:44pm

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

creatspot · March 1, 2018, 5:50pm

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?