Streaming live at 10am (PST)

[TUTORIAL] Make mobile menu SCROLLABLE

Hi Sabanna, I have this problem but don’t know how to fix it? My site looks good on mobile devices but the menu isn’t scrollable, what can I do to fix it? Followed your tutorial but I don’t think it works on Wordpress.

I would appreciate it if you could help!

Anis

@sabanna

Is the menu display ok on Safari when you set 100vh for the height?

Thank you by advance,

Take care

Hi, @Anis_Chity

I am not sure I understand your question about Wordpress. Do you mean that this settings doesn’t work after you transfer your site to Wordpress?

Best,
Anna

Hi @sabanna, Thanks for putting this tutorial together! This is exactly what I am trying to do. I tried what you suggested for the “Over Right” menu (creating “scroll-wrap” div and custom links, etc), but it’s not working for some reason. As you’ll see, my menu and the page content behind it still scroll. I would like to make it so only the menu scrolls and it’s only the height of the content inside it.

Would you mind taking a look and seeing if I missed something? Here’s the read-only link to the site: https://preview.webflow.com/preview/structures-brewing?preview=5ff8ce158cf7f177cd5e2bedca081522

Thanks so much!

Hi, @caseydb

All you need is set navbar to position: fixed for the devices where you have “hamburger” button. :slight_smile:

Cheers,
Anna

1 Like

@sabanna, thank you so much! I did that and it worked. :smile: I really appreciate you taking the time to help me.

Is there a way to stop the website scrolling behind the navbar? I read another forum post on this here, but I was not able to get it to work.

For that, you will need to make several changes

1.

Inside the interaction “Mobile Menu Fade In” change 2 steps, that affect mobile_menu_icon and mobile menu x`:
a) change trigger from “Click” to “Navbar”
b) add steps that make that icons display:none - Display: block

2.

Add script snippet to your existing custom code:

3.

I hardly recommend moving all that custom code to the “Site settings” level (not Page settings). Then it will affect all pages, even dynamic, and you don’t have to repeat it on every page

1 Like

I got it working a while ago, but forgot to say “thank you”. So, thank you @sabanna! :slight_smile:

1 Like

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.