Correcting The Long Menu Issue
You may find if you have too many menu items in your Divi menu that it will expand down below the screen, making some of the items cut off and out of reach. The background of the page scrolls, but the dropdown menu remains stationary by default. This quite the problem, and I am happy to say that our tutorial solves this. In this tutorial I will show you how to make the Divi mobile dropdown menu height scrollable so it does not get cut off when there are too many menu items.
FYI: You can do this with a setting directly in the Divi Builder with our popular Divi Responsive Helper plugin! Take a look, it is so easy!
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
Add Some CSS To Make The Divi Mobile Menu Dropdown scrollable
This tutorial is very easy because it only involves copying and pasting a simple CSS code snippet into your website. After that, your mobile menus that contain a lot of menu items will work great for your visitors.
If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.
/*make the Divi mobile dropdown menu scrollable*/
.et_mobile_menu {
overflow: scroll !important;
max-height: 80vh;
}
The max-height value in the provided code can be changed to suit your needs. The 80vh means 80% of the viewport height. This value seems to work well.
Do It With A Setting!
Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!
Here is the setting when using our plugin, it doesn’t get easier than this!
Greetings and thank you for this tip. Unfortunately, I can’t get this to work. I’ve applied the CSS fix to the .et_mobile_menu element, but only the page scrolls, not the menu.
Here’s the website: https://bicicultura.org/
Ops, I found the problem. It was this CSS code that was removing pointer events from the menu altogether:
.et_pb_module .et_mobile_nav_menu { pointer-events: none; }
I removed it and now it works as expected.
Sorry for the trouble!
Hello! Thank you very much…many time that i’m looking for this solution!!! GREAT.
You are welcome, I’m glad you found this resource helpful!
Hey thanks, works great. Is it possible to make the scrollbar invisible? So you don’t see it?
Sure, just use CSS https://www.digitalocean.com/community/tutorials/css-scrollbars and hide it with display: none;
If you want to maximised the available screen realestate there are a couple of things you can do to make this a bit better.
1. Instead of using vh units you could use the new dvh unit – this will avoid issues with UI elements blocking the bottom of your menu (looking at you iOS Safari)
2. If you have a statically sized header section, then you can use a calc function as well as dvh unit to make the menu always take up all available space without ever being too big.
.et_mobile_menu {
max-height: calc(100vh – 80px); /* fallback for a couple of more obscure mobile broswers that don’t yet support ‘dvh’ units */
max-height: calc(100dvh – 80px); /* 80px = expected max height of header – update for your use case */
overflow: scroll !important;
}
3. If you have a dynamically sized header, you can add the max-height as above but on ‘resize’ using JS. I made a script that does this for a project recently.
https://github.com/DigitalServicesLab/Divi-Dynamic-Mobile-Menu-Height/tree/main
Hi Mike!
Thank you for sharing the details with us. We’ll test it and update the guide!
Which video is it that shows how to get this same functionality on the Desktop vertical menu?
Hi Bradley!
Please use the following code for the desktop dropdown:
#main-header .nav li ul,.et_pb_menu .et_pb_menu__menu>nav>ul>li>ul{
height: 25vh;
overflow: auto;
}
Let me know how it goes!