How To Customize Style 1 - Sub Menu & Customer Header

Written by the Divi Engine Documentation Team

Introduction

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

Preview

Mobile Menu

Description

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

Difficulty

Easy - Medium.

Time

25 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 with Sub Menus 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. Remember to add Sub Menus.

Step 2: Set It Up - Premade Menu Style 1

Head over to Appearance > Customize > Divi Mobile > General Settings and select "Style 1" in the Premade Menus Styles section.

1.) Select "Style 1" in the Premade Menu Styles section.

Step 3: Customize Our Settings - 5 Sections In Divi Mobile Style 1

There are five sections in Divi Module Style 1 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 made above from the "Select Primary Menu" dropdown.
2.) Set the Primary Menu Movement as, "Expand from outside screen."
3.) Select the Expand Shape Style as, "Fullscreen Slide Down."

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.) Set the header height to be 100px.
3.) Enable the Fixed Menu On Scroll button.
4.) Set the "Burger Icon Position From Top On Scroll" to be 20px.

Burger Menu

1.) Set the Burger Menu from the Edge to be 10px.
2.) Set the Burger Menu from the Top to be 20px.
3.) Set the "Burger Menu Background Colour" to be that of your choice or use #0af2a5.

Menu Style

1.) Set the space above the menu to be 150px.
2.) Give your menu a background colour.

Sub-Menu Style

1.) Set the Sub-Menu Style to be Collapse Nested.
2.) Disable the "Border At Top" button.
3.) Give your Sub Menus a background colour of white (#ffffff).
4,) Make the Sub Menu Text Font Weight Bold.
5.) Set the Sub Menu Text colour.
6.) Set the Sub Menu Text Colour Hover.
7.) Set the Sub Menu Text Alignment to be "Right."

Step 4: Add Custom Code

No custom code here.

More Support?

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