Do It Yourself!
In this tutorial we are going to use DiviMenus Flex to display a mega menu when the user hovers over a Menu Item.
For that purpose, please reproduce the following steps.
Design a Mega Menu in the Divi Library
First of all, you need to design the mega menu that you want to display later. In order to do that, you can add a new Divi Layout to the Divi Library and use Divi modules (Texts, Blurbs, Images, Social Media Follow, etc). For this tutorial we are going to display a section with several blurb modules.
Add a DiviMenu Flex to your page
We have used the Divi responsive options to change the DiviMenu orientation and the Menu Items width on tablet and phone devices. In addition to that, we have aligned the DiviMenu to the center and hidden the Menu Button as well.
Add a Menu Item
Click on Add New Menu Item and type Custom Width in the Title field.
For this example, we will be adding another Menu Item in order to display a fullwidth mega menu.
Next, customize the Menu Item content or leave it as is. We are placing an icon to the left of the Menu Item text, as well as changing the text and background color.
Change the Link Type to Sub
Now, we will be able to display dropdown menus!
Leave the Source field as Divi Layout
Select the Divi Layout
Customize the Mega Menu
We are following the default display behavior for both Custom Width and Fullwidth Menu Items:
If the DiviMenu orientation is horizontal, the mega menu will be displayed over the page elements when hovering over the Menu Item.
On the other hand, if the orientation is vertical, the mega menu will be displayed inline (like a toggle) when clicking the Menu Item.
For the Custom Width Menu Item we have set a 850 pixels width for desktop and 100% width for tablet and phone.
For the Fullwidth Menu Item we have changed the alignment to justify in order to force the mega menu to take up all the available width when displayed over the page elements.
🥳 That’s it!
Feel free to use all the Sub Link Type fields (please notice the Sub toggle in the Design Tab) to customize the mega menu.
Apart from setting the width and adding an arrow, you can change the display behavior by enabling the Use Custom Display toggle field, increase or decrease the dropdown offset, change the alignment and other customizations.
We will be adding tutorials on mega menus and other features every now and then. Please, check our website and subscribe to our YouTube channel for upcoming updates!
Got any doubts? Click below for a more detailed explanation!
Detailed explanation
It is really easy to create custom mega menus with both DiviMenus Flex and DonDivi Nav Menu modules. So let’s see how to create a “Fullwidth” and “Custom Width” mega menu using any of the 2 modules.
First, keep in mind that on Desktop the SUB dropdown is placed below the Menu item with an Absolute position. Therefore, the width and alignment of the SUB dropdown are determined by the size of the Menu item. (You can also change the default behavior of the SUB dropdown from this field, although it is not the subject we are addressing in this case)
👉 When you use Menu Item > Design > SUB > Center Alignment
You can define the width of the SUB dropdown responsively by entering values in pixels (px) or percentage (%) in the Menu Item > Content > Link > SUB Width field, but remember that the percentage value will be based on the width of the Menu item itself. So, if you enter 80%, the SUB dropdown will be 80% narrower than the Menu item, which may be too narrow to display the content properly.
Therefore, it is recommended to use pixel units for Desktop and percentage units for Tablet/Phone. In Tablet/Phone view, your DiviMenu is often vertical instead of horizontal, and the Menu items are fullwidth*. So you could choose 80% or even 100%, and the SUB dropdown would have sufficient width to display all its content properly.
*(you can make them fullwidth in both modules: from DonDivi Nav Menu > Design Tab > Menu Items > Fullwidth, or DiviMenus > Design Tab > Fullwidth Menu Items)
👉 When you use Menu Item > Design > SUB > Justified Alignment
On the other hand, if you have chosen the “Justified alignment” option, the width of the SUB dropdown will extend responsively across the screen. Additionally, you could reduce the width of a fullwidth SUB dropdown for a specific device by entering a percentage value in the SUB Width field. For example, you could define 80% for desktop and 100% for tablet/phone. This would leave a margin on the left/right of your SUB dropdown in desktop view.
🎬 Watch this video to see it in action.
We hope this clarifies better for you how to create mega menus using both plugins.
Thank you and… Happy building! 🥳