Use Divi's Mobile Menu Module or Custom CSS to Add Parent Page Links

To show parent page links in Divi's mobile menu, enable the Mobile Menu module and adjust settings under Design > Menu > Show Dropdowns as Accordion. Alternatively, use custom CSS or a child theme to force parent links to appear. Plugins like Mobile Menu Customizer can also help.

Why Parent Links Disappear in Divi Mobile Menus

  • Divi's default mobile menu hides parent links when dropdowns are enabled.
  • Accordion-style menus prioritize child links for space efficiency.
  • Theme settings override standard WordPress menu behavior.

3 Methods to Display Parent Links in Mobile Menus

Method Difficulty Requires Coding? Time to Implement
Divi Mobile Menu Module
Enable "Show Dropdowns as Accordion" + toggle "Always Show Mobile Menu."		 Easy ❌ No 2-5 min
Custom CSS
Add .et_mobile_menu li.menu-item-has-children > a { display: block !important; } via Divi > Theme Options > Custom CSS.		 Medium ✅ Yes 5-10 min
Plugin Solution
Use a mobile menu plugin to override Divi's default behavior (e.g., force parent links visible).		 Easy ❌ No 5-15 min

Step-by-Step: Enable Parent Links via Divi Settings

  1. Go to Divi > Theme Builder (or edit a page with the Mobile Menu module).
  2. Add/Edit the Mobile Menu module in your header template.
  3. Under Design > Menu, enable:
    • Show Dropdowns as Accordion (required).
    • Always Show Mobile Menu (optional, for testing).
  4. Save changes and clear cache. Parent links will now appear as clickable headers.

Custom CSS Fix (Alternative Method)

If settings don't work, add this CSS to Divi > Theme Options > Custom CSS:

.et_mobile_menu li.menu-item-has-children > a {
  display: block !important;
  pointer-events: auto !important;
}

Note: Test on a staging site first. Adjust selectors if using a custom menu structure.

Troubleshooting Common Issues

  • Parent links still hidden? Disable caching plugins temporarily.
  • CSS not applying? Use !important or check for conflicts with other styles.
  • Menu breaks on click? Ensure JavaScript isn't blocked (test in incognito mode).
  • Mega menus not working? Parent links may require additional JS-consider a plugin.

Best Practices for Mobile Menu UX

  • Keep parent links short and clear (e.g., "Services" vs. "Our Award-Winning Services").
  • Use chevron icons to indicate expandable dropdowns.
  • Limit dropdowns to 2 levels deep for usability.
  • Test on multiple devices (iOS/Android) to confirm functionality.