How To Add Mobile Menu To The Theme Builder Menu

Written by the Divi Engine Documentation Team

Introduction

Follow these steps to add a Divi Mobile menu to your Theme Builder header menu.

Description

How to add a Divi Mobile menu to the Theme Builder menu.

Difficulty

Medium.

Time

35 Minutes.

NOTE: When building your Divi Mobile Menu in the Theme Customizer, you may notice that the settings do not show automatically - this is an occasional WordPress bug. If this happens to you, please click "Publish", go out of the customizer, reload and go back in.

Step 1: Set It Up - WordPress Menu

Start off by creating a WordPress menu in the Appearance > Menu section.

1.) Click on the Menus section.

2.) Add as many menu items as you need.

Step 2: Set It Up - Theme Builder Header

Go to Divi > Theme Builder and create a header (global preferably) adding the Code module.

1.) Click Divi > Theme Builder.

2.) Create a header menu adding the Code module.

Step 3: Set It Up - Premade Menu Style

Head over to Appearance > Customize > Divi Mobile and in the General Settings select your style in the Premade Menus Styles section.

1.) Select a style in the Premade Menu Styles section.

Step 4: Customize Our Settings - Theme Builder Header

Customize your Theme Builder header by adding the Divi Mobile shortcode [divi_mobile_tb_menu] to the Code module.

1.) Add [divi_mobile_tb_menu] to the Code module.

Step 5: Customize Our Settings - Premade Menu Style

Customize your menu using the settings provided. Make sure to select Divi Theme Builder in the Mobile Header Style section. For more information please visit our documentation to your left.

General Settings

1.) Turn on the Divi Theme Builder button.

Step 6: Add Custom Code

No custom code here.

Step 7: Conclusion

View your Mobile Menu on the frontend.

More Support?

Please email us at [email protected] if you are unable to get Divi Mobile working.