How to Make Parent Pages Link in Divi Mobile Menus

Introduction

If you’re using Divi and have noticed that parent pages in your mobile menu don’t link to their designated pages, you’re not alone. How to make parent pages link in divi mobile menus is a common frustration that many Divi users encounter when building their WordPress websites.

By default, Divi’s mobile menu treats parent menu items as expandable dropdowns rather than clickable links. While this design choice works well for navigation purposes, it can be problematic when you want visitors to access the parent page content directly from their mobile devices.

This comprehensive guide will walk you through three effective methods to enable parent page linking in Divi mobile menus. Whether you prefer working with custom CSS, JavaScript, or plugins, you’ll find a solution that matches your technical comfort level and gets your mobile navigation working exactly as intended.

Understanding the Problem

Divi’s mobile menu system is designed with a specific user experience in mind. When a menu item has child pages, the theme automatically converts it into an expandable element rather than a clickable link. This approach prioritizes navigation hierarchy over direct page access.

The issue stems from Divi’s JavaScript handling of mobile menu interactions. The theme’s code specifically prevents parent items from functioning as links when they contain submenu items. Instead, tapping these items triggers an expand/collapse animation to reveal or hide child menu items.

While this behavior makes sense from a navigation standpoint, it creates accessibility issues for users who want to visit the parent page directly. For example, if you have a “Services” page with subpages like “Web Design” and “SEO,” mobile users cannot access the main Services page content through the menu.

This limitation affects user experience and can potentially impact your site’s usability and SEO performance, especially if important content lives on those parent pages.

Method 1: Using Custom CSS

The CSS approach is the most straightforward solution for enabling parent page links in Divi mobile menus. This method modifies how the mobile menu displays and behaves without requiring complex code changes.

Step 1: Access the Divi Theme Customizer

Navigate to your WordPress dashboard and go to Appearance > Customize. Once the customizer opens, click on Additional CSS to access the custom CSS editor.

Step 2: Add the Custom CSS Code

Copy and paste the following CSS code into the Additional CSS field:

@media (max-width: 980px) {
    .et_mobile_menu .menu-item-has-children > a {
        pointer-events: auto !important;
        display: block !important;
    }
    
    .et_mobile_menu .menu-item-has-children .mobile_nav .select_page {
        display: none !important;
    }
    
    .et_mobile_menu li.menu-item-has-children > a:after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E") center center no-repeat;
        background-size: 20px;
    }
}

Step 3: Customize the Appearance

You can modify the CSS to match your site’s design. Adjust colors, fonts, or spacing by editing the relevant properties within the code block.

Step 4: Publish Changes

Click Publish to save your changes and make them live on your website.

This CSS solution enables parent page linking while maintaining the visual hierarchy of your mobile menu structure.

Method 2: Implementing JavaScript

For users who want more control over mobile menu behavior, JavaScript provides a more dynamic solution. This method allows you to customize exactly how parent links function.

Step 1: Access Your Theme Files

You can add JavaScript either through the WordPress dashboard or by editing your theme files directly. For dashboard access, go to Appearance > Theme Editor and select your active child theme.

Step 2: Add the JavaScript Code

Insert the following JavaScript code into your theme’s functions.php file or create a separate JavaScript file:

jQuery(document).ready(function($) {
    if ($(window).width() <= 980) {
        $('.et_mobile_menu .menu-item-has-children > a').each(function() {
            var $parentLink = $(this);
            var parentURL = $parentLink.attr('href');
            var parentText = $parentLink.text();
            
            // Create a new link for the parent page
            var $newParentLink = $('<a href="' + parentURL + '" class="parent-page-link">' + parentText + '</a>');
            
            // Insert the new link before the submenu
            $parentLink.parent().prepend($newParentLink);
            
            // Modify the original link to act as dropdown toggle
            $parentLink.addClass('dropdown-toggle').removeAttr('href');
        });
    }
});

Step 3: Enqueue the Script

If you created a separate JavaScript file, make sure to enqueue it properly in your functions.php file:

function enqueue_mobile_menu_script() {
    wp_enqueue_script('mobile-menu-fix', get_stylesheet_directory_uri() . '/js/mobile-menu-fix.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_mobile_menu_script');

This JavaScript approach gives you complete control over how parent links appear and function in your mobile menu.

Method 3: Using a Plugin

For users who prefer not to work with code, several plugins can resolve the parent page linking issue in Divi mobile menus.

Recommended Plugin: Divi Mobile Menu Enhancement

This plugin specifically targets Divi’s mobile menu limitations and provides an easy-to-use interface for enabling parent page links.

Installation Steps

1. Go to Plugins > Add New in your WordPress dashboard
2. Search for “Divi Mobile Menu” or similar keywords
3. Install and activate your chosen plugin
4. Navigate to the plugin settings page
5. Enable the “Parent Page Links” option
6. Configure any additional settings according to your preferences
7. Save your changes

Plugin Benefits

Using a plugin offers several advantages:

• No coding knowledge required
• Regular updates and support
• Additional mobile menu customization options
• Compatibility testing with Divi updates
• Easy to disable or remove if needed

Alternative Plugin Options

If the primary recommendation isn’t available, look for plugins that offer mobile menu customization for Divi or general WordPress mobile menu enhancements.

Frequently Asked Questions

Will these methods affect my desktop menu?

No, all three methods specifically target mobile menus and won’t change how your desktop navigation functions. The CSS and JavaScript solutions include media queries and conditions that only apply to mobile devices.

Can I use multiple methods together?

It’s not recommended to use multiple methods simultaneously, as they may conflict with each other. Choose the method that best fits your technical comfort level and stick with it.

What if my changes don’t appear immediately?

Clear your website cache and browser cache after implementing any of these solutions. If you’re using a caching plugin, purge the cache to see your changes.

Will these solutions survive Divi theme updates?

The CSS method will survive theme updates since it’s stored in the customizer. The JavaScript method will also persist if added to a child theme. Plugin solutions are independent of theme updates.

Can I customize the appearance of the parent links?

Yes, you can modify the CSS in any of these solutions to match your site’s design. Adjust colors, fonts, spacing, and other visual elements as needed.

What happens to existing mobile menu functionality?

These solutions preserve all existing mobile menu functionality while adding the ability to click parent page links. Submenu expansion and navigation hierarchy remain intact.

Take Control of Your Mobile Navigation

Enabling parent page links in Divi mobile menus significantly improves user experience and ensures visitors can access all your important content regardless of their device. Each method presented offers its own advantages, from the simplicity of CSS to the flexibility of JavaScript and the convenience of plugins.

Choose the approach that aligns with your technical skills and website management preferences. Remember to test your chosen solution across different mobile devices and browsers to ensure consistent functionality.

After implementing your preferred method, monitor your website analytics to see if mobile user engagement with parent pages improves. This data will help you understand the impact of making these navigation improvements on your overall site performance.