Fullscreen Megamenu with Items revealing Images on Hover
Learn how to recreate this awesome Fullscreen Megamenu for Divi! Add a Floating Icon to your page that, when clicked, will open a Fullscreen Megamenu with Items revealing different Images on hover!
For this video, we're using the "DiviMenus" plugin and its add-on "Floating DiviMenus".
Basically, first, we create the Megamenu and then the Floating Icon that will reveal it with a slide-up effect over the page content.
1. MEGAMENU
Add and adjust your Header elements as shown in the video and take advantage of the amazing SHOW link type included by DiviMenus to assign to each Menu Item the corresponding Image that should be revealed when hovering over them.
Besides revealing Images on hover, you can also set different URLs for each Menu Item when clicking.
In this example, we chose to hide the column that contains all the images on mobile so that they only show on desktop.
Finally, we assign an ID to the Megamenu Section: my-menu.
2. FLOATING ICON
Add a new layout to your Divi Library (choose "Module" type): A DiviMenu module with a single Menu Item looking like a Hamburger Icon. Use the SHOW link type to assign the ID: my-menu of the previously created Megamenu Section to the Menu Item.
That's it, play with the values to your liking and... Happy Building! 🥳
Follow the steps in this video tutorial and get the most out of your DonDivi plugins with other YouTube videos!
OTHER RELATED VIDEOS:
👉 Slide up an Off Canvas Row by clicking an Icon
• Slide up an Off Canvas Row by clickin...
👉 Designing a Sticky Header to open a Fullscreen Megamenu
• Designing a Sticky Header to open a F...
GRAB OUR PLUGINS RIGHT NOW:
🧡 DiviMenus
https://www.elegantthemes.com/marketp...
💜 Floating DiviMenus
https://www.elegantthemes.com/marketp...
DONDIVI
We create premium tools for improving your creativity and simplifying the way to design stunning websites with Divi.
