Skip to main content

Using Divi Mobile to Trigger Mobile Menu with a Custom Element

Divi Mobile allows you to enhance the interactivity of your mobile site by configuring custom triggers for your mobile menu. This can be particularly useful for improving user experience by providing additional, intuitive ways for visitors to navigate your site. Here’s how you can set up a Divi element, such as a button, to open and close the mobile menu.

Step 1: Add a Custom Class Name to Your Element​

  1. Navigate to the page with the Divi Builder where the element you want to use as a trigger is located. This could be any element like a button, image, or text module.
  2. Open the settings for the element by clicking on the module's settings gear icon. Go to the Advanced tab, and then find the CSS ID & Classes section. In the CSS Class field, enter a unique class name that will be used to identify this element. For example, custom-mobile-menu-trigger.

Add CSS Class

  1. In your WordPress dashboard, go to Divi > Theme Options. Click on the Integration tab which allows you to add custom scripts to your site.
  2. In the Add code to the <body> (good for tracking codes, etc.) box, paste the following JavaScript code, replace .custom-mobile-menu-trigger with the custom class name you assigned to your element in Step 1.
<script>
jQuery(document).ready(function( $ ) {
  $(document).on('click', ".custom-mobile-menu-trigger", function(e){
    e.preventDefault();
    e.stopPropagation();
    $('#open-button').trigger('click');
  });
});
</script>

Add JS to Body

  1. Click on Save Changes at the bottom of the Theme Options to ensure your JavaScript is added to your site.

Tips for Success​

  1. Ensure Unique Class Names: Make sure that the class name you choose for your trigger element is unique to prevent any unwanted behavior or conflicts with other elements.
  2. Testing: After implementing these changes, test the functionality on your site to ensure that clicking the element successfully opens and closes the mobile menu. Check on different devices to ensure compatibility and responsiveness.
  3. Debugging: If the menu does not toggle as expected, double-check your class names for typos, and ensure that the JavaScript has been correctly pasted into the Integration settings.

By following these steps, you can effectively link any Divi element to act as a custom trigger for opening and closing your Divi Mobile menu, thereby enhancing the functionality and user-friendliness of your mobile navigation.

Last updated on