Menu Enhancements

This page demonstrates various menu enhancements provided by Divi Responsive Helper, improving navigation behavior and usability across devices.

Default Divi Menu (Without Menu Enhancements)

This example shows the default Divi menu behavior without any menu enhancement features enabled. It provides a baseline for comparison with the enhanced menu examples below.

Show and Hide Menu Items Per Device

This example demonstrates how individual menu items can be shown or hidden on different devices. On desktop, all three menu items are visible. On tablet, the Plugin List Two menu item is hidden. On phone, the Plugin List Three menu item is hidden.

Show Hamburger Menu on Desktop

This example shows a hamburger menu displayed on desktop, with custom open and closed icons.

Add Text Beside the Hamburger Menu Icon

This example displays text beside the hamburger menu icon and shows how the text can be customized.

Show An Open Menu On Mobile

This example shows how the menu can be displayed in an open state on phone devices instead of using a hamburger icon.

Close Mobile Menu By Clicking Outside Dropdown

This example allows the mobile menu to be closed by clicking or tapping outside the dropdown area.

Collapse Mobile Menu Submenus

This example allows mobile menu submenus to be collapsed instead of remaining open by default.

Collapse Submenus When Another Is Opened

This example ensures that when a submenu is opened, any other open submenu is automatically closed. This keeps the mobile menu clean and prevents multiple submenus from being open at the same time.

Open/Close Submenus By Clicking Parent Menu Item

This example allows submenus to be opened and closed by clicking the parent menu item itself. When enabled, the parent menu link becomes the toggle for the submenu instead of navigating to a page.

Make Mobile Menu Height Scrollable

This example makes the mobile menu scrollable when it contains many items. Instead of menu items being cut off, the menu itself can scroll within a defined height, making all links reachable on smaller screens.

Menu Breakpoint

This example sets a custom menu breakpoint so the hamburger menu appears at 1024px instead of the default 980px, preventing menu items from overlapping on larger screens.

Note: Resize the browser window and interact with the menu to observe how each menu enhancement behaves at different screen sizes.