[TUTORIAL] Make mobile menu SCROLLABLE

[sabanna]

Hello guys and girls :slightly_smiling:

Many of us been in the situation when we have a fixed navigation with too many nav-links in the menu, so they are not all visible on mobile device screens. And at this point, we want to have our menu be scrollable. So how to do this?

Solution will depend on the Menu opening type, that you choose in the Navigation settings

NOTE: All these tips make sense only for fixed navigation!

1. DROP DOWN menu

This Solution is easiest. All you have to do is give the nav-menu a fixed height and set it overflow: auto

---

2. Over Right & Over Left (menu slides out from the right or left side)

In this type of the menu we will have to use some tricky step and DO NOT CHANGE overflow and height settings of the nav-menu.

1) Add a div inside the nav-menu and give it a class (I call it "scroll-wrap")
2) Give this div some fixed height and set overflow: auto
3) Add link-blocks+text or just text-links into the scroll-wrap div and style them as a nav-links (because standard nav-links have pre-defined settings, which do not let to move them anywhere.)

---

Good luck with your projects

Best regards,
Anna

[Filipa]

Thanks @sabanna

[Quantumgo]

This isn't working for me, I can't move my nav links into the Scroll-wrap div...... Help?

Ohhh I see your comment about link block plus text, would I then make these hidden on desktop and then make the navlinks hidden on tablet and mobile?

[Quantumgo]

@Sabanna okay I did this but it's not working for me... Any ideas as to why?

https://preview.webflow.com/preview/streets-of-orleans?preview=e531c17caa8792b9188023e17678629c

[sabanna]

Hello, @Quantumgo

Because of navbar at the top, which takes some space of the screen, in your case, you can make scroll wrap about 75-80vh.
Basically, navbar height + scroll wrap height should be 100vh.

Cheers,
Anna

[Quantumgo]

@Sabanna thank you you're a genius!!

[MetaFlare]

This is awesome, thank you for this @sabanna!

[Quantumgo]

@sabanna okay so part of it works and part doesn't.... when I click on themes it won't scroll... but everything else does... I'm so confused!

[sabanna]

Yeah looks weird I will try to figure it out

[sabanna]

Ok, try to reduce font size for the links and remove option overflow: scroll from the dropdown list when it is open.

[Quantumgo]

@sabanna, again you're a genius! Thanks so much!

[JamesLondesborough]

Thanks @sabanna ! Been looking for this for a while now

[Anis_Chity]

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

[Blaise_Posmyouck]

@sabanna

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

Thank you by advance,

Take care

[sabanna]

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

[caseydb]

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!

[sabanna]

Hi, @caseydb

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

Cheers,
Anna

[caseydb]

@sabanna, thank you so much! I did that and it worked. 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.

[sabanna]

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

[caseydb]

I got it working a while ago, but forgot to say "thank you". So, thank you @sabanna!