Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Make The Divi Mobile Dropdown Menu Height Scrollable

Nelson Miller Profile Orange
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.

▶️ Please watch the video above to get all the exciting details! 👆

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!

Divi Responsive Helper Plugin by Pee Aye Creative

Here is the setting when using our plugin, it doesn’t get easier than this!

set the mobile menu scrollable height setting in the Divi Responsive Helper 2.3

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

12 Comments

Comments By Members

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

  1. Bradley Boardman <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

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

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      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

    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
  2. Mike

    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 <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi Mike!

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

      Reply
  3. Dirk

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

    Reply
  4. Ilenia

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

    Reply
  5. Gonçalo Peres

    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

      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

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Shopping cart0
There are no products in the cart!
You may be interested in…
Sorry, I Was Thinking About Web Design Shirt
$19.00$22.50

Select options This product has multiple variants. The options may be chosen on the product page

404: Sleep Not Found Shirt
$16.50$24.00

Select options This product has multiple variants. The options may be chosen on the product page

Sorry, I Was Thinking About My Code Shirt
$16.50$24.00

Select options This product has multiple variants. The options may be chosen on the product page

I Love It When My Wife Lets Me Code Shirt
$19.00$24.00

Select options This product has multiple variants. The options may be chosen on the product page

No Comment Shirt
$20.50$24.00

Select options This product has multiple variants. The options may be chosen on the product page

Graphic showcasing Divi Assistant features and toolset.
From: $69.00 / year

Select options This product has multiple variants. The options may be chosen on the product page

Divi Search Helper Plugin By Pee Aye Creative
From: $29.00 / year

Select options This product has multiple variants. The options may be chosen on the product page

Continue shopping
0