How To Make The Divi Mobile Dropdown Menu Height Scrollable

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

1. 

   Bradley Boardman Divi Adventure Club Member on August 15, 2023 at 12:29 pm

   Which video is it that shows how to get this same functionality on the Desktop vertical menu?

   Reply
   • 

     Hemant Gaba Divi Adventure Club Member on August 16, 2023 at 5:29 pm

     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!

     Reply

Comments By Others

1. 

   Dan Norris on February 27, 2025 at 8:20 am

   I have a mobile menu that when i click the right positioned arrow/button key for a parent item, it will correctly drop down the nested menu.

   However when i click anywhere else such as the menu item text or that space, it will close the whole menu. I want it to be consistent across all of the width of the menu option.

   Any ideas to solve this?

   Reply
   • 

     Hemant Gaba Divi Adventure Club Member on March 3, 2025 at 6:35 am

     Hi Dan!

     Not sure how you created the collapsible menu. Please use the following guide and add both the JS and CSS code in it.

     https://www.peeayecreative.com/how-to-collapse-divi-mobile-menu-submenus/

     Hope it helps!

     Reply
2. 

   Mike on July 4, 2023 at 5:27 am

   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

   Reply
   • 

     Hemant Gaba Divi Adventure Club Member on July 19, 2023 at 1:32 pm

     Hi Mike!

     Thank you for sharing the details with us. We’ll test it and update the guide!

     Reply
3. 

   Dirk on April 30, 2023 at 2:24 pm

   Hey thanks, works great. Is it possible to make the scrollbar invisible? So you don’t see it?

   Reply
   • 

     Nelson Lee Miller (aka The Divi Teacher) Author on May 1, 2023 at 3:17 pm

     Sure, just use CSS https://www.digitalocean.com/community/tutorials/css-scrollbars and hide it with display: none;

     Reply
4. 

   Ilenia on April 17, 2023 at 5:24 pm

   Hello! Thank you very much…many time that i’m looking for this solution!!! GREAT.

   Reply
   • 

     Nelson Lee Miller (aka The Divi Teacher) Author on April 21, 2023 at 10:23 am

     You are welcome, I’m glad you found this resource helpful!

     Reply
5. 

   Gonçalo Peres on April 3, 2023 at 5:46 am

   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/

   Reply
   • 

     Gonçalo Peres on April 3, 2023 at 5:56 am

     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!

     Reply