How to Make Divi Mobile Menu Scrollable Quick Fix Solution

Do you want to quickly make Divi mobile menu scrollable with just two steps? In a recent project, I was working on a new site using the Divi WordPress theme. I came across one of the most common issues on the Divi WordPress theme.

Table of Contents

The mobile menu is not well optimized and tends to stick on the screen while the background scrolls. If you have a long menu some items are not visible since by default there is no scrolling on the div mobile menu.

Make Divi Mobile Menu Scrollable

In this quick post, I want to show you how to quickly optimize the Divi mobile menu to make it scrollable on any mobile device. You can make the menu scrollable by adding the scroll property to the main mobile menu wrapping class and setting a fixed height and that will fix the menu scroll problem on Divi mobile.

These are the steps to follow to make a mobile menu on Divi scrollable :

Login into your WordPress dashboard
Go to Appearance menu > Customize sub-menu and open the Additional CSS tab on the Customizer panel.
Add the code below to the Additional CSS after all other code and publish the changes.

.et_mobile_menu {   
    overflow-y:scroll!important;
    max-height:80vh!important;
    -overflow-scrolling:touch!important;
    -webkit-overflow-scrolling:touch!important;
}

This will fix the nonresponsive menu problem on Divi mobile.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

How to Make Divi Mobile Menu Scrollable Quick Fix Solution

Make Divi Mobile Menu Scrollable

Similar Articles

Related