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.
Add a div inside the nav-menu and give it a class (I call it “scroll-wrap”)
Give this div some fixed height and set overflow: auto
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.)
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.
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.
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: Webflow - Structures Brewing
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
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
I will try to figure it out
