Blog

How to Make Parent Pages Clickable in Divi Mobile Menus

August 11, 2025 No comments yet

If you’re using the Divi theme by Elegant Themes to design your WordPress site, you may have noticed a frustrating quirk in the mobile menu navigation. By default, Divi disables the parent menu item’s link if there are child items under it. This can hinder the user experience, especially when that parent page holds key content or serves as a landing page. Fortunately, there’s a way to make parent pages clickable in Divi’s mobile menus.

This guide will walk you through simple methods to achieve this using minimal code and without requiring you to sacrifice your site’s layout or functionality.

Understanding the Issue

Divi uses a built-in JavaScript function to manage how its mobile accordion-style menu behaves. When a link in the mobile menu has sub-items, the parent item’s default behavior is overridden. This is to ensure that clicking the parent link only expands the submenu rather than navigating away from the menu.

However, this behavior prevents users from accessing the parent link itself, which can be problematic. Imagine having a “Services” page that also has sub-pages like “Web Design” and “SEO.” If someone on mobile taps “Services,” they won’t be taken to that main page — they’ll only expand the submenu options.

Option 1: Modify JavaScript to Enable Clicks

One of the most effective ways to make the parent pages clickable again is by modifying how clicks are handled through JavaScript. Here’s a straightforward approach using custom code:

  1. In your WordPress dashboard, navigate to Divi > Theme Options > Integration.
  2. Scroll to the section “Add code to the <head> of your blog” and paste the following JavaScript snippet:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var menuLinks = document.querySelectorAll(".mobile_menu_bar .menu-item-has-children > a");

    menuLinks.forEach(function(link) {
      link.addEventListener("click", function(e) {
        if (!this.classList.contains("clicked")) {
          e.preventDefault();
          this.classList.add("clicked");
        }
      });
    });
  });
</script>

How it works: On the first tap, the menu expands (default behavior). On the second tap, the user is taken to the actual page. It’s a good compromise between functionality and user behavior expectations on mobile.

Option 2: Use a Plugin

If you’re not comfortable editing JavaScript, consider using a plugin like “WP Mobile Menu” or “Max Mega Menu”. These plugins allow you to control the behavior of menu items more granularly.

Just follow these steps:

  • Install and activate the plugin from the WordPress repository.
  • Go to the plugin’s settings and enable “Clickable Parent Menu Items.”
  • Customize the mobile menu layout and save the settings.

Using a plugin offers a user-friendly interface and removes the risk of breaking your site with incorrect code changes.

Option 3: CSS and Structural Tweaks

Another approach is tweaking the structure of your menu and adding minor CSS adjustments. For instance, separating the submenu toggle icon from the actual link can give users two distinct click targets — one for expanding the submenu, and one for following the link.

To implement this:

  1. In your Divi Menu module, make sure that child items are nested properly.
  2. Add a small toggle icon (like a down arrow) next to the parent item using a pseudo-element or icon.
  3. Use CSS to differentiate between clicking the icon and the link.

Here’s a sample CSS snippet:


.et_mobile_menu .menu-item-has-children > a:after {
  content: " ▼";
  float: right;
}

.et_mobile_menu .menu-item-has-children > a {
  pointer-events: auto;
}

This allows you full control over how users interact with your mobile menu, giving you the flexibility to craft a more intuitive experience.

Best Practices and Final Tips

  • Test on multiple devices to ensure the behavior works as expected across various screen sizes and browsers.
  • Keep your JS and CSS optimized to prevent mobile performance issues.
  • Always backup your site before making any custom code changes.

Making parent pages clickable in Divi mobile menus is more about enhancing user experience than technical optimization. Done right, it allows your visitors to explore your content more naturally and increases the usability of your navigation system.

If you frequently use parent pages for key landing content, implementing this small but impactful change can significantly improve mobile site navigation—and, in turn, visitor satisfaction.