If your WordPress site uses the Divi theme, you may have noticed a frustrating issue on mobile navigation: tapping a parent menu item does nothing, and users must tap a small dropdown arrow to expand submenus.
This behavior is part of Divi’s default mobile menu functionality—but it can be improved with a simple JavaScript adjustment.
Issue Background
On mobile devices, Divi handles menu items with children by making the parent label non-interactive while assigning submenu toggle behavior only to a small arrow icon.
- Parent link does not expand submenu
- Small arrow controls dropdown
- Users often miss the arrow
This creates usability issues, especially for navigation-heavy sites.
Diagnosis
Divi overrides click behavior
Divi prevents parent menu items from triggering submenu expansion and assigns that behavior only to the dropdown arrow via JavaScript.
Poor mobile UX
Users expect the entire menu item to be tappable. Limiting interaction to a small icon leads to confusion and missed navigation paths.
Resolution Steps
Step 1: Override default click behavior
Remove Divi’s default handler and add a custom click event to parent menu items.
Step 2: Add custom JavaScript
document.addEventListener('DOMContentLoaded', function () {
const menuItems = document.querySelectorAll('.menu-item-has-children > a');
menuItems.forEach(function (item) {
item.addEventListener('click', function (e) {
const parent = this.parentElement;
e.preventDefault();
parent.classList.toggle('submenu-open');
});
});
});Step 3: Adjust CSS for submenu display
.submenu-open > ul.sub-menu {
display: block;
}Step 4: Test on mobile
Verify behavior across devices and browsers to ensure consistent submenu expansion.
Final Outcome
- Parent menu items are fully clickable
- Submenus expand intuitively
- Mobile navigation is significantly improved
If your mobile navigation isn’t user-friendly, contact Freshy for expert WordPress and Divi customization support.
