How To Customize Style 1 - Desktop, Tablet & Mobile Menu
Written by the Divi Engine Documentation Team
Follow these steps to customize the built-in Divi Mobile Style 1.
How to customize the Divi Mobile built-in Style 1 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
Start off by creating a WordPress menu in the Appearance > Menu 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).
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.
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.
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.
2.) Set the Burger Menu Background Colour to be the colour #0af2a5.
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.
Please email us at [email protected] if you are unable to get Divi Mobile working.