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.