Overview
The Divi Responsive Helper plugin includes several menu-related features. The purpose of these features is to make it easier for you to make the menu on your Divi website more responsive. In this document, we will explain what these features are, what they do, and how to use them.
Just a quick note: the screenshots here are from Divi 4, but everything works exactly the same in Divi 5. The only difference is the user interface of the Divi Builder. When more people start using Divi 5 and Divi 4 is phased out, we'll be sure to update the screenshots to reflect that.
How To Use
Configure The Settings Divi 4
To start using the menu feature in Divi 4, go to the Divi > Theme Options menu in your WordPress backend, then select the Divi Responsive Helper tab, which our plugin adds. Select the Menu subtab and enable and configure the settings as needed.
Enable The Settings In The Menu Module
The second toggle in the Menu tab is labeled Enable Settings In Menu Module. This feature activates the settings created by the Divi Responsive Helper plugin within the existing Menu module. Whether you are using the Theme Builder for your header or the Menu module elsewhere in your page layout, you can access all the necessary settings for our plugin directly within the Divi Menu module.
Enable And Configure The settings For The Default Header Menu
If you are still using the default Divi header, not the Menu module, but the one that came with Divi by default, then you can enable the third toggle in the Menu tab called Enable Settings For Default Header Menu. This toggle setting expands and collapses all the settings related to the default header menu, which you can then configure below.
Configure The Settings Divi 5
To start using the widow fixer feature in Divi 5, go to the Pee-Aye Creative menu in your WordPress backend, then select Divi Responsive Helper. In the plugin settings interface, open the Menu tab from the left sidebar. From there, enable and configure the settings as needed.
Show/Hide Menu Items Per Device
WordPress navigation menus do not have any way to control which items show on which device. This Divi Responsive Helper feature allows you to control which menu items to show or hide 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/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.
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!
Show A Hamburger Menu On Desktop
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.
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 An Open Menu On Mobile
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!
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 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.
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.
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.
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.
