how to make parent pages link in divi mobile menus

If your Divi mobile menu opens submenus when you tap a parent item and never actually follows the parent page link, you’re not alone. Mobile patterns often use the first tap to open a submenu and the second tap to visit the parent — but Divi defaults can prevent that. The easiest and most reliable fix is to add a tiny JavaScript that lets the first tap open the submenu and the second tap follow the parent link. Another clean option is adding a separate visible link for the parent page. Below I’ll show both approaches step-by-step so you can pick the one that fits your site.

Why parent links don’t work by default on Divi mobile menus

Mobile UX pattern: tap-to-toggle vs tap-to-follow

On mobile, menus often treat parent items like toggles: first tap = open children, second tap = follow. This avoids accidental navigation. Divi’s mobile menu behavior prioritizes expanding submenus — sometimes preventing any click through entirely.

Divi’s menu markup and default behavior

Divi uses a menu structure where parent <a> is paired with a toggle control. Scripts intercept clicks on parents which results in stopping the default link action and instead opening the submenu.

Two main approaches to solve it

Option A: Allow a second tap to follow the parent link

This is the most elegant: keep the familiar toggle, but on the second tap the link works. Good UX and minimal markup changes.

Option B: Add a separate parent link (duplicate) or custom link

Add a visible separate menu item that points directly to the parent page (eg. “About — Main Page”), while keeping the parent item purely as a submenu toggle. Simpler, but creates duplicate entries to manage.

Step-by-step: Prepare your WordPress menu (base settings)

Create or edit the parent page link

Go to Appearance → Menus.
Ensure the parent page exists in your menu and has the correct URL.
If you plan to use Option B (duplicate link), add a Custom Link with the exact parent URL and place it where you want.

Add a CSS class (optional but recommended)

In the Menu screen click Screen Options (top-right) and enable CSS Classes.
Add a class like mobile-parent-link to your parent items you want to behave differently. This helps target only those menu items in code.

Code solution (JavaScript + jQuery) — second-tap to go

What this code does

Detects taps/clicks on parent menu anchors in Divi mobile menus.
On first tap it prevents navigation and adds an “open” class (so submenu opens).
On second tap (if the same anchor is tapped again) it allows the browser to follow the link.

This mirrors native mobile UX and avoids adding duplicate menu items.

Exact code snippet to paste

<!-- Paste this in Divi > Theme Options > Integration > Add code to the <head> (or use child theme footer) -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Ensure jQuery is available; if not, use vanilla fallback
  var $ = window.jQuery;
  if (!$) {
    // Vanilla JS fallback
    var lastTapped = null;
    document.querySelectorAll('.et_mobile_menu .menu-item-has-children > a').forEach(function(anchor) {
      anchor.addEventListener('click', function(e) {
        var now = Date.now();
        var id = anchor.getAttribute('href') + '::' + anchor.parentElement.getAttribute('data-menu-item-id');
        if (lastTapped && lastTapped.id === id && (now - lastTapped.time) < 1200) {
          // second tap within 1.2s -> allow navigation
          return;
        }
        // first tap -> prevent and open submenu
        e.preventDefault();
        var parentLi = anchor.parentElement;
        parentLi.classList.toggle('mobile-sub-open');
        var submenu = parentLi.querySelector('.sub-menu');
        if (submenu) {
          if (submenu.style.display === 'block') submenu.style.display = 'none';
          else submenu.style.display = 'block';
        }
        lastTapped = { id: id, time: now };
      }, { passive: false });
    });
    return;
  }

  // jQuery version (most sites with Divi have jQuery)
  jQuery(function($) {
    var lastTap = null;
    $('.et_mobile_menu .menu-item-has-children > a').on('click', function(e) {
      var $a = $(this);
      var now = Date.now();
      var id = $a.attr('href') + '::' + $a.parent().attr('id');

      if (lastTap && lastTap.id === id && (now - lastTap.time) < 1200) {
        // allow link
        return;
      }
      // else prevent and toggle
      e.preventDefault();
      $a.parent().toggleClass('mobile-sub-open');
      $a.next('.sub-menu').slideToggle(180);
      lastTap = { id: id, time: now };
    });
  });
});
</script>

Where to add the script (Child theme / Divi → Theme Options / Code Module)

Best: add to your child theme’s footer.php before </body> or enqueue as a JS file.
Easier: Divi → Theme Options → Integration → Add code to the <head> or Add code to the <body>. Paste the script there.
Alternative: Put in a Code module on a global header/footer layout (if using Divi Theme Builder).

Alternative CSS-only trick (limited, best used with custom links)

When CSS alone can work

If you use a duplicate custom link (Option B) or want submenu indicators styled differently, CSS can help visually separate the toggle from the link but can’t change the basic tap behavior across all browsers.

CSS snippet

/* Make the submenu toggle icon separate and clickable */
.et_mobile_menu .menu-item-has-children > a {
  position: relative;
  padding-right: 40px; /* leave space for toggle */
}
.et_mobile_menu .menu-item-has-children > a::after {
  content: "\25BC"; /* caret */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* caret not clickable by CSS alone */
}
/* If you want caret clickable, add a separate element in the menu markup */

Note: CSS alone can’t reliably turn the parent into a two-stage tap control — JavaScript is needed.

Option B explained: Add a visible “Parent Page” link

How to add a duplicate custom link in Appearance → Menus

Go to Appearance → Menus.
Add a Custom Link with the exact URL of the parent page.
Label it clearly (e.g., “Services (main page)”) and place it where you want mobile users to see it.
Keep your original parent as the dropdown opener but hide the label for desktop with CSS if desired.

Best practices to avoid SEO/UX issues

Use rel="noopener" where possible for external links.
Avoid exact duplicated anchor text on the same menu depth — slight variation helps clarity (e.g., “Services” vs “All Services”).
Keep menu concise — too many duplicates can confuse users.

Accessibility & mobile usability considerations

Screen reader behavior

Ensure toggle buttons have aria-expanded attributes updated when toggling submenus.
If using the JS snippet, consider enhancing it to set aria-expanded="true/false" on the parent <a> for accessibility.

Tap targets and keyboard users

Make touch targets at least 44x44px.
Ensure keyboard users can open submenus with Enter and navigate links via Tab.

common issues

Script not loading / jQuery missing

If your site defers or removes jQuery, use the vanilla JS fallback included above.
Check console errors (Developer Tools) for missing references.

Conflict with cache / minification plugins

After adding JS/CSS, clear cache and purge minification. Some plugins combine and minify files and might change script order.

Testing checklist (before and after)

Test on multiple devices (iOS Safari, Android Chrome).
Use browser devtools mobile simulator for quick checks.
Test keyboard-only navigation and screen reader focus.
Clear cache and test with and without logged-in admin bar visible.
Test menu open/close transitions and link following.

Final tips: performance, backups, and future-proofing

Always backup theme files before editing.
Use a child theme for permanent scripts and styles.
Keep custom JS minimal and well-commented.
Monitor Divi updates — test after major updates in a staging site.
Consider adding a small unit test checklist to your deployment process.

Conclusion

Getting parent pages to actually link in a Divi mobile menu is a common need. The cleanest solution is the small JavaScript snippet above that makes the first tap open the submenu and the second tap follow the link — preserving good mobile UX while ensuring parent pages link in Divi mobile menus as users expect. If you prefer not to add JS, the duplicate custom link approach also works, though it’s a bit more manual. Whatever path you take, remember to test across devices, watch accessibility, and keep backups.

FAQs

Q1: Will the JavaScript snippet affect desktop menus?

No — the selectors target .et_mobile_menu which Divi uses for mobile. On desktop the regular menu behavior remains unchanged.

Q2: Do I need a child theme to add this code?

You don’t need a child theme; you can paste the snippet in Divi → Theme Options → Integration or in a Code Module. But for safer, update-proof changes, a child theme is recommended.

Q3: My site uses a caching/minification plugin — what should I do?

After adding the code, clear and purge your cache and rebuild minified files. If a minifier breaks the script, exclude the script from minification or load it inline.

Q4: Is the duplicate custom link bad for SEO?

Not inherently. Avoid duplicating identical anchor text in the same menu level. Slightly different text and clear structure keep SEO and UX safe.

Q5: How can I make the menu accessible for screen readers?

Update your toggle logic to set aria-expanded on open/close and ensure submenu containers have aria-hidden set correctly. Test with a screen reader (NVDA, VoiceOver).