How To Customize Style 3 - Bottom Navigation & Custom Header

Written by the Divi Engine Documentation Team

Introduction

Follow these steps to customize the built-in Divi Mobile Style 3.

Preview

Mobile Menu

Description

How to customize the Divi Mobile built-in Style 3 as seen in the images above.

Difficulty

Medium.

Time

30 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 1

Start off by creating a WordPress menu in the Appearance > Menu section. This will be the primary menu for your website.

1.) Click on the Menus section.
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.

1.) Click on the Menus section.
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.

1.) Select "Style 3" in the Premade Menu 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.

General Settings

1.) Select your menu 1 made above from the "Select Primary Menu" dropdown.
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.

Custom Header

1.) Click YES to create your own custom header. Note that you may need to Publish, exit the Customizer and return to get the button to save.
2.) Upload a logo for your Custom Header.

Burger Menu

1.) Set the Burger Menu Open and Closed Colour

Menu Style

1.) Set your Menu Text Colour.

Bottom Navigation Style

1.) Set your Icon Colour.
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.

More Support?

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