How to Make Parent Pages Link in Divi Mobile Menus

Introduction

If you’ve built a website using the Divi theme, you’ve likely experienced the frustration of parent pages becoming unclickable in mobile menus. This common issue affects countless how to make parent pages link in divi mobile menus users who want their mobile visitors to access parent pages just as easily as they do on desktop. The good news? You can fix this problem with a few simple solutions that don’t require advanced coding skills.

Divi, created by Elegant Themes, stands as one of WordPress’s most popular themes, powering millions of websites worldwide. Its drag-and-drop builder and responsive design capabilities make it a favorite among both beginners and experienced developers. However, like many themes, Divi has certain default behaviors that don’t always align with every website owner’s needs.

The mobile menu functionality in Divi follows a standard approach where parent pages with dropdown menus become toggle buttons rather than clickable links. While this design choice makes sense from a navigation standpoint, it creates problems when you actually want users to visit those parent pages. This guide will show you exactly how to restore that functionality using two proven methods.

Understanding the Parent Page Problem

When you create a navigation menu in how to make parent pages link in divi mobile menus with dropdown items, the theme automatically converts parent pages into expandable menu items on mobile devices. Instead of linking to the actual page, tapping a parent item simply reveals its child pages. This behavior prevents mobile users from accessing important parent pages that might contain valuable content or serve as category overviews.

This issue particularly affects websites with hierarchical content structures, such as service-based businesses, educational sites, or e-commerce stores with product categories. Visitors expect to click on “Services” and see a general services page, not just a list of specific service types.

The problem stems from Divi’s mobile menu JavaScript, which prioritizes navigation functionality over direct page access. While this approach works for some sites, many website owners need both functionalities: the ability to access parent pages and navigate to child pages.

Solution 1: The CSS Method

The most straightforward way to make parent pages clickable involves adding custom CSS to your Divi website. This method requires no plugins and gives you complete control over the implementation.

Step 1: Access the Divi Theme Customizer

Navigate to your WordPress dashboard and go to Appearance > Customize. In the Divi Customizer, look for “Additional CSS” in the left sidebar. This section allows you to add custom styles that will override Divi’s default mobile menu behavior.

Step 2: Add the Custom CSS Code

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

@media only screen and (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;

    }

}

This code specifically targets mobile devices with screens smaller than 980 pixels wide. It restores the clickable functionality to parent page links while maintaining the dropdown arrow for accessing child pages.

Step 3: Customize the Dropdown Indicator

To make the user experience clearer, you might want to modify how the dropdown indicator appears. Add this additional CSS:

@media only screen and (max-width: 980px) {

    .et_mobile_menu .menu-item-has-children > a:after {

        content: ” +”;

        float: right;

        font-weight: bold;

    }

    .et_mobile_menu .menu-item-has-children.visible > a:after {

        content: ” -“;

    }

}

This code adds a plus sign (+) next to parent items and changes it to a minus sign (-) when the dropdown is expanded, providing clear visual feedback to users.

Step 4: Test and Publish

After adding the CSS, click “Publish” to save your changes. Test the mobile menu on various devices or using your browser’s mobile emulation tools to ensure parent pages are now clickable while dropdown functionality remains intact.

Solution 2: The Plugin Method

For users who prefer a plugin-based solution or want additional customization options, several WordPress plugins can resolve the parent page linking issue in Divi mobile menus.

Recommended Plugin: Mobile Menu

The “Mobile Menu” plugin offers comprehensive mobile navigation solutions that work seamlessly with Divi. This plugin not only fixes the parent page issue but also provides enhanced mobile menu features.

To install and configure the plugin:

Download and install the Mobile Menu plugin from the WordPress plugin repository. Once activated, navigate to the plugin settings in your WordPress dashboard. The plugin automatically detects your Divi theme and provides specific configuration options.

Configure the plugin to how to make parent pages link in divi mobile menus clickable while preserving dropdown functionality. The plugin offers intuitive settings that don’t require coding knowledge, making it accessible for users of all skill levels.

Alternative Plugin Options

If the Mobile Menu plugin doesn’t meet your specific needs, consider these alternatives:

WP Mobile Menu provides similar functionality with different styling options and additional features like mega menus and social media integration.

Responsive Menu offers extensive customization capabilities and works well with Divi’s existing design framework.

Each plugin has its own strengths, so evaluate them based on your specific requirements, budget, and desired features.

Testing Your Implementation

Regardless of which method you choose, thorough testing ensures your mobile menu works correctly across different devices and browsers. Use these testing strategies:

Test on actual mobile devices rather than relying solely on browser emulation tools. Different devices may render your mobile menu slightly differently, and real-world testing reveals potential issues.

Check various screen sizes, including tablets, large phones, and smaller mobile devices. Your solution should work consistently across the entire mobile device spectrum.

Verify that both parent page links and dropdown functionality work as expected. Users should be able to access parent pages directly and still expand dropdown menus to reach child pages.

Test loading speeds to ensure your solution doesn’t negatively impact mobile performance. Mobile users expect fast-loading pages, and your navigation fixes shouldn’t slow down the experience.

Frequently Asked Questions

Will these solutions affect my desktop menu?

No, both the CSS method and plugin solutions specifically target mobile devices. Your desktop navigation will remain unchanged and continue functioning exactly as it did before implementing these fixes.

Can I undo these changes if needed?

Yes, both methods are completely reversible. For the CSS method, simply remove the custom code from the Additional CSS section. For plugin methods, deactivate or uninstall the plugin to return to the original mobile menu behavior.

Do these solutions work with all Divi versions?

The CSS method works with all recent versions of Divi. However, major theme updates might occasionally require minor code adjustments. Plugin solutions typically update automatically to maintain compatibility with the latest Divi versions.

Will this affect my site’s loading speed?

The CSS method adds minimal code and shouldn’t noticeably impact loading speeds. Plugin solutions may add slight overhead, but reputable plugins are optimized for performance and shouldn’t significantly slow down your site.

Can I customize the appearance further?

Absolutely. The CSS method provides a foundation that you can build upon with additional styling. Plugin solutions often include customization options for colors, fonts, animations, and layout adjustments.

Taking Your Mobile Menu to the Next Level

Making parent pages clickable in Divi mobile menus solves a fundamental usability issue, but it’s just the beginning of creating an exceptional mobile experience. With functional parent page links, your mobile visitors can navigate your site more intuitively and access all your important content.

Consider this fix as part of a broader mobile optimization strategy. Review your entire mobile user experience, from page loading speeds to touch-friendly button sizes, ensuring your Divi website performs excellently across all devices.

Whether you choose the CSS method for direct control or prefer a plugin solution for additional features, you now have the tools to create a mobile menu that works exactly as your visitors expect. Implement your chosen solution today and give your mobile users the seamless navigation experience they deserve.