Divi Responsive Helper

Documentation & Support

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

Menu

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 a hamburger menu on Desktop setting Divi Responsive Helper 2.2

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

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

Last updated Sep 15, 2022 @ 12:42 pm

0

Your Cart