How To Make The Divi Mobile Menu Dropdown Scrollable Tutorial by Pee Aye Creative

How To Make The Divi Mobile Dropdown Menu Height Scrollable

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!

Divi Responsive Helper by Pee Aye Creative 2.3

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!

Divi Responsive Helper by Pee Aye Creative 2.3

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

Last updated Mar 17, 2023 @ 4:21 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

6 Comments

  1. 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
  2. Ilenia

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

    Reply
  3. Dirk

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

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart