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.
Final Thoughts
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.
I like this option and will use it. But I have a minor issue on mobile that I’m sure is an easy fix – my menu items go below the screen and I can’t scroll down the menu to get to them, the page scrolls instead. I have it set to be in a fixed position at the top for both desktop and mobile. Is the fixed position the issue? Thank you!
Hi!
It is a common issue happening when you have a mobile menu with lots of menu items (which make the menu expand beyond the viewport) and use a fixed header. Divi MadMenu provides several ways to avoid this issue:
1) Try collapsing the mobile submenus using the MadMenu Settings -> Content -> Mobile Menu -> Collapse Submenus setting. This helps make the mobile menu smaller allowing the user to expand/collapse the submenus. You can also enable the accordion mode for the collapsed mobile menu submenus using the MadMenu Settings -> Content -> Mobile Menu -> Accordion Mode setting which allows having only one expanded submenu(of the same level) at a time thus preventing the mobile menu from becoming too large as with several expanded submenus.
2) Another way to prevent this issue is to create different mobile menus in Appearance -> Menus for desktop, tablet and phone devices and then assign them for each devices by enabling the responsive settings for the MadMenu Settings -> Content -> Mobile Menu -> Mobile Menu setting. This allows using simpler menus with less menu items for mobile devices thus preventing it from expanding beyond the bottom of the viewport.
3) You can set a max-height for the mobile dropdown menu in vh units (eg.: 75vh) using the MadMenu Settings -> Design -> Mobile Menu -> Mobile Menu Max Height setting. This will prevent the mobile dropdown menu from expanding beyond the viewport no matter how many menu items it has, and the mobile dropdown menu content(menu items) will become vertically scrollable.
4) Finally, you can combine all of the methods above.
Hope this helps.
Those are great options. Thank you!
David
Thanks for all the great features. Is there a way to have the mobile menu drop down full width and to hide the dark line at the top please? Thank you.
Hi Martin.
Yes, you can do that easily. You can find the mobile menu design settings in the MadMenu Settings -> Design -> Mobile Menu section.
Use the Mobile Menu Border Width setting to set the dropdown menu border to 0, this will hide the dark line at the top which is actually the top border of the dropdown menu.
And to make the dropdown menu fullwidth use the Mobile Menu Width and Mobile Menu Max Width settings, you can set them to 100%.
Hope this helps.
Thank you Ivan, that worked great.
Just one more thing, is it normal for the plug in to be slower than the normal native theme builder as it is rather slow? When you open a setting panel it is slow then it gets a little faster after a few seconds. Thank you.
You’re welcome, Martin. Divi MadMenu is built using the official Divi API, and since it has lots of options, it’s probably affecting the module’s speed a bit when using it in the Builder, though not critically(it also greatly depends on the performance of your computer). But this does not affect the frontend speed.