Step 7: Sub-Menu Style

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. 

Remember to update or publish your work as you go. Follow the images below.

1.) Appearance Customize. 

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

2.) Divi Mobile Sub-Menu Style. 

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

3.) 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

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.

Well done for completing step sevn. Click HERE to proceed to step eight.

Please remember to contact us HERE for any support.

Still need help? Contact Us Contact Us