Custom Mobile Menu

Divi Pixel empowers you to design a fully customized mobile menu with ease using the Divi Builder. Its built-in settings ensure seamless integration, automatically triggering the popup menu when the Hamburger Icon is clicked. Additionally, the options in the Divi Pixel dashboard let you specify the desired menu and mobile menu layout where your custom mobile menu should be displayed.

View Demo →

Design a Custom Mobile Menu

To design the custom mobile menu, we will use the Divi Pixel Popup Maker.

1. Go to your WordPress dashboard, and navigate to the Popup Maker custom post type
2. Click Add New Popup Maker
3. Add a Title for your Mobile Menu layout
4. Design your Mobile Menu using the Divi Builder

Layout Setting

Here are the recommended layout settings to make the mobile menu full width and height.

1. In the Section settings, go to Design → Sizing
2. Set the Width to 100%
3. Set the Min Height to 100vh
4. In the Popup Maker settings, click the Customization tab
5. Add 100% width to all devices
6. Save the page

Adding Custom Close Button

By default, the Popup Maker displays the close button across all devices. However, you can disable this default close button in the Popup Maker settings and add a custom element to your layout that will close the popup or mobile menu when clicked. Follow the steps below if you’d like to display a custom close icon or element.

In the sample below, we added the Blurb module with icon.

1. Add Blurb or any other module to your mobile menu layout
2. In the module settings, add custom CSS Class in Advanced → CSS ID & Classes toggle
3. In the Popup Maker settings, navigate to Triggering Settings
4. Add Closing CSS Selector followed with dot (CSS Class)

In this last step, disable the default Popup Maker Close Icon in the Popup Maker settings.

1. In the Popup Maker settings, select the Customization tab
2. Enable the Hide Close Button option
3. Deselect all devices in Show Close Button within Popup section
4. Save Page

Setting up the Mobile Menu

The custom mobile menu layout can now be triggered using the native hamburger icon.

1. In WordPress dashboard, navigate to Divi → Divi Pixel
2. In the left sidebar menu, select Mobile tab
3. Scroll down and enable the Custom Mobile Menu Style and Use Popup as Mobile Menu options. Note: Fullscreen Mobile Menu option must be disabled
4. Select the mobile menu layout you previously created using the Popup Maker
5. Select the Menu where the custom mobile menu should apply
6. Cave Changes

Using Mobile Menu Templates

Prebuilt mobile menu templates are available for download on the Divi Pixel website. Once imported, these templates serve as an excellent starting point for creating your own custom mobile menu. They come pre-configured and are designed to work seamlessly.

1. In WordPress dashboard, navigate to Tools → Import
2. On the next screen click Run Importer link

1. Select the dp-mobile-menu.xml file
2. Click the Upload file and import
3. Create new user or assign import to the current user
4. Select Download and import file attachments checkbox
5. Click Submit button

The imported layouts can be found in your WP Dashboard under the Popup Maker custom post type.

Exporting Layouts

Divi Pixel includes a built-in exporter, enabling you to effortlessly export specific items from the Popup Maker custom post type.

1. In your WordPress dashboard navigate to Popup Maker tab
2. Select the items you would like to export
3. From the dropdown menu, select Export Popup option
4. Click Apply button

NOTE: If you are experiencing styling issues, where the Popup Maker/Mobile Menu is not displayed correctly on front-end, then make sure to clear Static CSS File in Divi → Theme Options → Builder → Advanced. This step is required, even when this option is disabled. In that case, enable that and click Clear button.