In this tutorial you’ll learn how to make Divi mobile menu scrollable to ensure that all mobile menu items remain accessible to users on smaller screens.

If you’ve faced the issue with the fixed (or sticky) Divi mobile menu overflowing the viewport at the bottom on mobile devices when expanded then this solution is for you.

Table of Contents

1. Demo
2. The Problem
3. Make Divi mobile menu scrollable
4. Collapse Divi mobile menu submenus
5. Make Divi MadMenu mobile menu scrollable (no-code solution)
6. Conclusion

Demo

Click the mobile menu toggles (aka the hamburger menu icons) to see the mobile menu before and after making it scrollable.

The Problem

As you can see from the live demo above, the default mobile menu having lots of menu items is overflowing the bottom edge of the viewport (the BEFORE menu). This makes some of the menu items at the bottom of the dropdown menu inaccessible for users.

Overflowing mobile dropdown menu hinders navigation. It is a huge UX issue because if users can’t access all the menu items this can lead to frustration which can further lead to higher bounce rates and site abandonment.

Make Divi mobile menu scrollable

To avoid the overflowing mobile menu we’ll do the followings:

1. Limit its height relative to the viewport.
2. Enable vertical scrolling when the items exceed that limit.

/**
 * Make Divi mobile menu scrollable.
 * @source  https://divicio.us
 */
@media (max-width: 980px) {
    #et_mobile_nav_menu .et_mobile_menu,
    .dvcs_scrollable_mobile_menu.et_pb_menu .et_mobile_menu,
    .dvcs_scrollable_mobile_menu.et_pb_fullwidth_menu .et_mobile_menu {
        max-height: 65vh; /* Adjust this value as needed */
        overflow-y: auto;
    }
}

This CSS works with the default mobile menu of Divi theme, as well as with the menus created using the Menu and Fullwidth Menu modules. For the Menu modules you just need to add the dvcs_scrollable_mobile_menu CSS class in the module settings Advanced -> CSS ID & Classes -> CSS Class field.

How it works

• max-height: 65vh keeps the menu from growing beyond 65% of the screen height, no matter the device or orientation. Adjust the 65vh value up or down to suit your design.
• overflow-y: auto automatically adds a scrollbar once your menu items exceed that height, so users can still reach every link by scrolling the menu up and down.

Collapse Divi mobile menu submenus

Additionally, we could also collapse the mobile menu submenus to make the mobile dropdown menu even more compact initially.

However, this may be insufficient if the submenus have lots of menu items, which will still make the mobile menu overflow the viewport when submenus are expanded.

So, in such a case there is still a need to restrict the maximum height of the mobile dropdown menu and make it’s content scrollable.

Make Divi MadMenu mobile menu scrollable

Divi MadMenu allows you to make the mobile menu scrollable without the need to use any custom CSS.

All you need to do is to set a max-height for the mobile menu in MadMenu Settings -> Design -> Mobile Menu -> Mobile Menu Max Height field.

Click the mobile menu toggle button to open the mobile menu, then click the parent item to expand the submenu and see the mobile menu become scrollable:

Conclusion

Mobile screens have limited space, and a scrollable menu allows you to organize a large number of menu items without compromising the layout. This can improve the overall navigation experience. 

If users can’t easily find what they’re looking for in your mobile menu they may leave your site quickly thus increasing the bounce rate. A scrollable menu helps avoid users frustration and encourages them to explore your content further and to return to your site later again.

So, make sure users don’t miss out on important navigation link on your site mobile menu, apply the little tweak suggested in this tutorial to make your long Divi mobile menus scrollable.

This will ensure that your site remains accessible, organized, and easy to navigate on mobile devices, which are increasingly the primary means through which users access the web.