6 Quick Steps to Customize Divi Mobile Menu Submenu Using the MMC Plugin
Have you ever wanted to be able to collapse the Divi mobile menu submenu while still keeping the parent menu item clickable? Or set up your submenu so that only one submenu would be opened at a time thus keeping the mobile menu as small as possible? Or simply style it without having to apply any custom CSS?
All these and more can be easily done using the Divi Mobile Menu Customizer plugin. In a few clicks. Really.
In this post I would like to provide a quick overview of the Submenu Settings of the MMC plugin, we are going to cover the following features:
- Collapse Submenu
- Make Parent Item Clickable
- Enable Accordion
- Customize Parent Item Arrow
- Submenu Animation
- Submenu Styling
To start customizing the submenu we need to navigate to Divi->Theme Customizer->Mobile Menu Customizer->Submenu Settings section which looks like this by default:
For this tutorial we have a long mobile menu having three submenus with 2-4 items each, which we are going to customize using the MMC plugin.
As you can see there are quite a few options available for the submenu, but that’s not all, the rest of options are hidded since we haven’t collapsed the submenu yet.
So, let’s start with the first option – Collapse Submenu.
Such a long mobile menu certainly won’t fit into small mobile screens and the user will have to scroll the page down in order to be able to see the menu items at the bottom of the menu.
And if you want to have a fixed mobile menu(MMC plugin can do that as well) then some of the menu items at the bottom will not be reachable at all, and this is something you wouldn’t like to happen.
But this problem can be solved by simply selecting the Yes option for the Collapse Submenu setting which will collapse all submenus and make the mobile menu smaller.
Make Parent Item Clickable
You may ask what happens to the parent item link, does it still remain clickable when collapsing submenus is enabled?
The answer is “no” since by default the collapsing submenu feature disables the parent item link and clicking on it will only expand/collapse the submenu.
But this might not be the desired behaviour, you may need the parent item still to be clickable, and to do this we need to check the Make Parent Item Clickable option which appears(along with some other options) on the options panel as soon as we enable submenu collapsing.
After enabling this feature clicking the arrow will still expand/collapse the submenu but clicking the parent item will send you to the page it is linking to(or scroll the page to a section if you’ve set an anchor).
Now that we have enabled collapsing submenus to make the mobile menu shorter and fit into the screen, what if the user expands all submenus? The mobile menu will become too long again and the user will have to collapse some of the expanded submenus to be able to see the items at the bottom.
If you don’t want to provide this kind of user experience to your site visitors then consider enabling the accordion feature for submenu.
This feature will make the previously expanded submenu collapse automatically as the next one is expanded thus keeping only one submenu expanded at a time and preventing the mobile menu from becoming too long.
Customize Parent Item Arrow
As you may have noticed, the parent item arrow appearing after we enable the submenu collapsing looks a bit too thin and tiny and it seems somewhat difficult to tap on it, especially if the parent item is set to be clickable and the user has to see exactly where he/she needs to tap to expand the submenu and accidentally not to click the parent item link instead.
Fortunately, the MMC plugin provides solution for this as well allowing you to fully customize the parent item arrow.
To enable arrow customization options we need to check the Customize Parent Item Arrow checkbox and the options set will show up below it.
When the arrow customization is enabled the default arrow styling is applied and it looks like this:
Now it is much more obvious where the site visitor should tap to expand or collapse the submenu. You can apply any other design to the arrow if you wish, the options provided allow you to do the followings:
- Select a different icon
- Set the arrow rotation degree
- Change arrow size
- Apply border width and radius
- Adjust padding
- Set colors for arrow, its background and border
For example, you could make the arrow look like this in no time:
Next we have the Submenu Animation option. It allows you to animate the submenu when expanded and provides 10 different animation types as well as the “No Animation” option.
There is also the Submenu Animation Duration option which lets you set the animation duration.
Finally, we have customization options for general styling of the submenu. These options allow you to set the submenu font size and font style, background color, link color and active link color.
That’s all, as you see, with just a few clicks we can have an entirely different mobile menu.
The submenu settings provided by the Divi Mobile Menu Customizer plugin allow you to make the Divi mobile menu and submenu a lot more user friendly really quickly and easily. These are only a portion of the features provided by this plugin, you can actually do a lot more with it. Click the button below to learn more.