How To Customize Style 3 - Bottom Navigation & Custom Header
Written by the Divi Engine Documentation Team
Follow these steps to customize the built-in Divi Mobile Style 3.
How to customize the Divi Mobile built-in Style 3 as seen in the images above.
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 1
Start off by creating a WordPress menu in the Appearance > Menu section. This will be the primary menu for your website.
2.) Add as many menu items as you need.
Step 2: Set It Up - WordPress Menu 2
Continue by creating another WordPress menu in the Appearance > Menu section. This menu will be assigned to the Bottom Navigation.
2.) Add two menu items.
3.) Add your own custom icon to each menu item. Find your own CSS class HERE.
Step 3: Set It Up - Premade Menu Style 3
Head over to Appearance > Customize > Divi Mobile > General Settings and select "Style 3" in the Premade Menus Styles section.
Step 4: Customize Our Settings - 5 Sections In Divi Mobile Style 3
There are five sections in Divi Module Style 3 that you will need to adjust to get the style seen in the images above. For more information on this module, please visit our documentation to your left.
2.) Set the Primary Menu Movement as, "Expand from Shape."
3.) Select the Expand Shape Style as, "Circle Expand."
4.) Select the "Bottom Navigation" as the Secondary Menu Style.
5.) Assign your Menu 2 as the Secondary Menu. This will set Menu 2 as the Bottom Navigation.
2.) Upload a logo for your Custom Header.
Bottom Navigation Style
2.) Set the Icon FOnt Size to 25px.
3.) Set the text Colour.
Step 5: Add Custom Code
No custom code here.
Step 6: Conclusion
If you would like to include the Search Icon and functionality shown in the preview image at the top of this example then go to Appearance > Customize > Header > Header Elements and tick the Show Search Icon checkbox.
Please email us at [email protected] if you are unable to get Divi Mobile working.