Solved: Divi Mobile Menu Extends over screen, can’t scroll, some menu items not visible

You may discover that using Divi theme menu module and having long enough menu with nested menu items the menu might upon opening extend deeper down on screen than there is room on screen and hence it will not be fully visible on mobile screens. In addition the long menu is not scrollable, leaving further down menu items not acessible on mobile devices.

This, I would say, is a major flaw in the Divi menu module and must be fixed by Elegant Themes in coming up releases.

Nevertheless, how to solve it now when your Divi theme menu module is not fully visible and not scrollable in mobile devices?

Worry not, after several hours of searching and trying I am happy to present you the simple CSS fix to solve that issue 🙂

How to solve Divi mobile menu with many items not visible on mobile screens?

Simply use this code in Divi Custom CSS.


.et_mobile_menu {
overflow: scroll !important;
max-height: 84vh; /*edit this to match your view height*/
box-shadow: 0px 0px 30px rgba(0,0,0,0.3) /*just some box shadow for nicer menu, you can skip this*/
}

How or where to paste this code?

This CSS code needs to be copied and pasted into Divi theme customizer in Custom CSS section. In WordPress admin navigate to Divi -> Theme Options -> General and scroll down to Custom CSS box.

CSS fix to DIVI mobile menu not fitting on screen and not scrollable
CSS fix to DIVI mobile menu not fitting on screen and not scrollable

After applying this fix your long mobile menu should become scrollable, once opened.

This fix was applied and tested on Divi theme version 4.3.2.

 

PS, there is a solution offered by Elegant Themes that I tried with no luck. If my offered solution is not helping you, maybe you can try this:

 

Post Author: Tom Pai