Menu Settings Overview
The Divi Responsive Helper plugin includes several features related to the menu:
- Mobile Menu Opened Icon
- Show/Hide Menu Items
- Mobile Menu Breakpoint
The purpose of these features is to make it easier for you to make your Divi website responsive. In this document, we will explain what each of these features are and what they do and how to use them.
To begin using the menu settings, go to the Divi>Theme Options. There you will see a new tab that our plugin adds called “Divi Responsive Helper.” Once you click on that, you will see more tabs. Click on the “Menu” tab to see all of the menu related features in the plugin.
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!
Mobile Menu Opened Icon
Enable this feature to change the mobile menu hamburger icon to an X when the dropdown menu is toggled open. An X gives the visitor a visual indication that the menu has been opened, and can be clicked to close it again. This is a simple feature that improves the user experience.
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 Open Menu Item On Mobile
Mobile 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.