Divi Responsive Helper

Documentation & Support

Menu settings of the Divi Responsive Helper Plugin by Pee Aye Creative


Divi Theme Options Menu settings in the Divi Responsive Helper 2.3

The first toggle in the Menu tab is a setting called Enable Settings In Menu Module. This does exactly what it says, it activates settings created by the Divi Responsive Helper plugin inside the existing Menu module.

Menu Module settings in the Divi Responsive Helper plugin

You will notice that the Menu module and Theme Options have identical settings. This is because the settings in Theme Options affect the default header menu, while the settings in the Menu module affect just that module. Having the separate settings in the Menu module, a huge breakthrough and introduces many convenient options that can be enabled or disabled per module.

Show/Hide Menu Items

Enable this feature to add new checkmarks in the WordPress navigation menu items to show or hide the menu items on Desktop, Tablet, or Phone. Once enabled, each menu item in Appearance>Menus will have checkmark boxes which allow you to choose on which device sizes you want that particular menu item to be visible.

show or hide menu items per device with Divi Responsive Helper

Choose Navigation Menu Per Device In Menu Module

The Divi Menu module is limited because it only allows you to select one WordPress navigation menu, and that menu shows on all devices. So we hacked the Divi Menu module and added responsive settings to the menu selection dropdown! Now you can choose a completely different navigation menu to show on Desktop, Tablet, and Phone!

responsive menu selection in the Divi Menu module with the Divi Responsive Helper plugin

Show A Hamburger Menu On Desktop

This feature allows you choose to show a hamburger menu icon on desktop, just like what you see on Phone devices. There are many use cases for this, and it’s nice to have this as a simple setting.
show hamburger menu on desktop setting in the Divi Responsive Helper plugin

Opened/Closed Icon Picker For Menu Module

Choose which icons you want to use for both the opened and closed hamburger menu icons. The icon picker allows you to choose any icon included with Divi.

mobile hamburger menu open and closed icon picker settings in the Divi Responsive Helper 2.3

Add Text Beside Hamburger Menu Icon

Enable this feature to show a word or text to the left side the of the hamburger menu icon. This gives the visitor a visual indication or prompt to make it clear that it is the menu.

show text beside hamburger menu icon setting Divi Responsive Helper 2.2

Show An Open Menu On Mobile

Sometimes you want to remove the hamburger menu icon and open the menu instead on Phone devices. There are many use cases for this, and it’s nice to have this as a simple setting. 
show an open menu on phone setting Divi Responsive Helper 2.2

Close Mobile Menu By Clicking Outside Dropdown

If you are viewing a Divi site on mobile and open the menu, but then want to close it, you may tend to click (or touch) the area around the outside of the dropdown, thinking it will work like other apps and close the menu. But not so, it does not do that in Divi. So we created a setting to do just that, now you can close the mobile menu by clicking outside it!

close mobile menu dropdown by clicking outside menu setting in the Divi Responsive Helper 2.3

Collapse Mobile Menu Submenus

This feature allows you to collapse the submenus rather than keep them open, which is the default behavior. This really helps tidy up the menu and makes it much shorter as well.

collapse mobile menu submenus setting Divi Responsive Helper 2.2

Collapse Submenu When Another One Is Opened

This setting makes any open submenu closes as soon as another submenu is clicked open. This way, there is only one submenu open at one time.

Collapse Submenu When Another Is Opened menu setting in the Divi Responsive Helper 2.3

Open/Close Submenus By Clicking Parent Menu Item

This next new setting takes it a step further. After the submenus are collapsed, you can also choose to open and close the submenu by clicking the parent menu item. So for this, just keep in mind that it effectively disables the parent menu link. The parent link becomes the clicking point to open or close the submenu, just like the icon.

open and close submenus by clicking parent menu item setting Divi Responsive Helper 2.2

Menu Breakpoint

Enter the screen width pixel value for the responsive breakpoint for when the menu changes between desktop and mobile versions. This is helpful especially when you have a larger number of menu items that start to overlap due to space issues. Increasing the breakpoint higher than the default 981px allows the hamburger menu to appear on larger device sizes to prevent the ugly and unprofessional stacking issue.

menu breakpoint setting Divi Responsive Helper 2.2

Make Mobile Menu Height Scrollable

You may find if you have too many menu items in your Divi menu that it will expand down below the screen, making some of the items cut off and out of reach. The background of the page scrolls, but the dropdown menu remains stationary by default. This quite the problem, and I am happy to say that our plugin solves this with a new setting that will allow you to make the mobile menu scrollable and set the height of the scrollable area.

set the mobile menu scrollable height setting in the Divi Responsive Helper 2.3
Last updated January 23, 2024

Your Cart