Step 8: Sub-Menu Style

Written by the Divi Engine Documentation Team

Watch This Video

Introduction

Follow this information to use the Sub-Menu Style of Divi Mobile.

Read First

As you build your mobile menu you need to know two things. Firstly, due to the way WordPress has been built, there may be times that the live preview mode does not load instantly. If you find this happening, please publish and reload until you see your work. Note that you may also have to view your mobile menu from a device that is not logged into the wp-admin dashboard of your Divi website such as your mobile phone. Secondly, Divi Mobile saves the menu you build to your active theme. Therefore if you change your active theme to a new child or parent theme then you will need to rebuild your menu.

Go To The Theme Customizer

Make your way to the Divi customizer by clicking on Appearance > Customize.

Click On Divi Mobile Sub-Menu Style

Click on Divi Mobile and then on Sub-Menu Style.

Sub-Menu Style

The sub-menu style section of Divi Mobile allows you to style the sub-menu that opens up when your customer clicks on a parent menu item containing a sub-menu by adding colour, styling the font, adding personalized icons and more. While each element is self-explanatory, we do provide information on some of the features below to assist you.

SUB-MENU STYLE

Select how you would like to have the sub-menu appear. We have built three options for you to choose from, Collapse Nested, Overlap Slide-In and Side By Side. If you would like to disable the click-through of the parent menu item then click YES.

SUB-MENU APPEARANCE

Style your sub-menu under the sub-menu appearance section. Give your sub-menu a custom width, colour, spacing and so on.

OPEN SUB-MENU ICON APPEARANCE

The parent menu item of your sub-menu will have by default, an icon attached to it. Customize this icon when the menu is open.

CLOSE SUB-MENU ICON APPEARANCE