The Divi mobile menu looks correct on the phone screen with its familiar three line hamburger icon.
But tapping that icon produces absolutely no response from the website at all. The menu stays hidden and visitors have no way to navigate to other pages on the site. This frustrating problem usually happens because another element sits on top of the hamburger icon.
The visitor thinks they are tapping the menu button but something invisible is actually blocking it. That invisible blocker could be a sticky header element, a floating widget, or a z-index conflict.
JavaScript optimization plugins can also cause this problem by delaying the menu script too aggressively. When the menu script loads after the user taps the icon, nothing happens and the menu stays closed.
Here are the most effective solutions for fixing the Divi mobile menu problem.
- Add custom CSS to increase the z-index of the mobile menu button
- Disable JavaScript defer or delay for Divi menu scripts in caching plugins
- Temporarily deactivate all optimization plugins to identify the conflict source
- Check for sticky headers or floating elements that might cover the menu button
- Update Divi to the latest version available from Elegant Themes
Here is a quick reference table for excluding Divi scripts from JavaScript optimization.
| Script handle | When to exclude it | What happens if excluded |
|---|---|---|
| et-core | Always exclude | Divi core functionality remains intact |
| divi-builder | Always exclude | Builder scripts load at the right time |
| et-builder-modules | When menu breaks | Frontend modules work correctly |
| wp-api | When builder fails | REST API requests function properly |
For more information about JavaScript optimization and Divi compatibility, visit the Autoptimize page on wpwizzy.com.
Here is the custom CSS solution that usually fixes the blocked menu button problem.
Add this code to Divi Theme Options under the General tab in the Custom CSS field.
.et_mobile_menu { z-index: 9999 !important; position: relative !important; }
.et_pb_menu__wrap { z-index: 9999 !important; position: relative !important; }
This code forces the mobile menu to sit on top of any other elements on the page.
The !important rule ensures that no other CSS can override these z-index settings at all. After adding this CSS, clear all caches and test the mobile menu on an actual phone device.
If the menu still does not work, the problem is likely related to JavaScript optimization instead. Disable JavaScript defer or delay features in the caching plugin and test the menu again.
Finding the right combination of exclusions usually takes a few tries but eventually works perfectly.