How To Customize Style 1 - Desktop, Tablet & Mobile Menu

Written by the Divi Engine Documentation Team

Introduction

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

Preview

Desktop Menu

Mobile Menu

Description

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

Difficulty

Easy.

Time

20 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 - Divi Logo

Add a logo to your website. This image will appear on the header (the main menu that appears at the top of your website).

1.) Click Divi > Theme Options.
2.) Upload an image into the "Logo" section.

Step 3: Set It Up - Premade Menu Style 1

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

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

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

There are three 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 as the Primary menu.
2.) Set the Expand Style to be, "Circle Expand."
3.) This menu will appear on Desktop, Tablet and Mobile. To enable this, set the Break Point width to be 2000px or more. This will cover most screen sizes.

Burger Menu

1.) Set the Burger Menu Closed and Open colour to be white (#ffffff).
2.) Set the Burger Menu Background Colour to be the colour #0af2a5.

Menu Style

1.) Make sure that there is space at the top of the menu of around 100px.
2.) Make sure that the Background Colour is set to be #1d0d6f or a colour of your choice.
3.) Make the Menu Text colour to be white (#ffffff).
4.) Set the Menu text Font Size to be 20px.
5.) Set the Menu Text Alignment to be "Center."
6.) Set the Menu text Padding to be 5px.

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.