How To Change The Mobile Menu Placement and Close It On Outside Click
The Divi MadMenu v1.4 released recently adds some very useful new features for the Mobile Menu element.
It’s now possible to change the mobile dropdown menu placement, alignment and min-width, and also make it close on outside click.
Mobile Menu Placement
By default the mobile dropdown menu is placed in the middle of the header having a width of 80% of the header contents container width.
In the screenshot above the default dropdown menu might seem to be unnecessarily wide, you would probably want it to have a smaller width.
Although you could change it’s width(using the Design->Mobile Menu->Mobile Menu Width setting), the mobile dropdown menu would still remain in the same place – in the middle of the header.
Which doesn’t look really nice on desktop considering that the Mobile Menu Toggle(the hamburger menu) is placed on the far left side of this header.
It would look much better if the dropdown menu was placed right below the Mobile Menu Toggle(“attached” to it).
Previously, the only solution was to move the Mobile Menu element (using the Design->Layout:General->Mobile Menu Order setting) closer to the middle of the header(since the dropdown menu couldn’t be moved).
This looks better. But it wouldn’t be a desired solution if you wanted to have the mobile menu on the left side of the desktop header.
Thankfully, there is a simple solution for that now.
To make the dropdown menu be “attached” to the Mobile Menu Toggle rather than stay always in the middle of the header all you need to do is to select the Attached To Menu Toggle option for the Content->Mobile Menu->Dropdown Menu Placement setting.
Now, no matter where you move the Mobile Menu element, the dropdown menu will allways be attached to it.
Mobile Menu Alignment
Since the mobile dropdown menu is centered by default you might want to change it’s alignment depending on your header layout.
To change the dropdown menu alignment use the Design->Mobile Menu->Mobile Menu Alignment setting.
The mobile dropdown menu will be aligned depending on the option selected for the Dropdown Menu Placement setting.
If the Default option selected then it will be aligned relative to the header.
However, if the Attached to Menu Toggle option selected then the dropdown menu aligns relatively to the Mobile Menu Toggle.
Mobile Menu Min Width
Divi MadMenu v1.4 also adds the possibility to set the mobile dropdown menu minimum width.
You can do that by using the new Design->Mobile Menu->Mobile Menu Min Width setting.
This setting is especially useful if you use the percentage unit (%) for setting the dropdown menu width (it’s actually the default unit).
It helps prevent the dropdown menu from squeezing too much on small screens.
Close On Outside Click
Another new feature is the possibility to set the mobile dropdown menu to close automatically when you click anywhere on the page outside the Mobile Menu Toggle and the dropdown menu.
To enable this feature use the Content->Mobile Menu->Close On Outside Click setting.
The new features added in Divi MadMenu v1.4 make the plugin even more flexible.
Now you have more design possibilities thanks to the mobile dropdown menu placement, alignment and min-width settings and especially them being responsive.
This means that you can “attach” the mobile dropdown menu to the hamburger menu enabled on desktop and fully control it’s positioning, alignment and min-width.
And still keep it perfectly centered on mobile independently from where the hamburger menu is placed by selecting the “default” placement option for the mobile devices.
This just makes the menu look nicer, doesn’t it?
Stay tuned for more feature updates coming soon!
Hope you find this tutorial helpful. Feel free to share your thoughts and suggestions in the comments section below.