MEGA Menus are one of the most intuitive and functional developments by Wix in the recent few years.
These extensive immersive menus can change how users interact with and perceive a website. You can add a MEGA Menu on your website too.
Yes, you read that right. You can add a MEGA Menu, and there are two easy ways to do it: a coded way and a no-code way. So, please sit back, relax and dive more profound as we cover both versions.
The No-Code Way To Mega Menu in Wix
Let us dive deeper and understand how the No-Code way to get a MEGA Menu on Wix works.
You’ll be needing a lightbox to implement the MEGA Menu
So, click on the Add icon on the top left of the Editor
Select Interactive
Choose the category of Lightbox you’d like to explore
Drag and drop the Lightbox you like the most onto your website
Select the Lightbox and adjust it according to your requirement. You can look into the background overlay, text alignment, offset, etc.
Turn off the AutoDisplay under Settings so that the Lightbox does not automatically show up whenever someone visits the page.
Visit the Site Pages section of the Editor and select Lightboxes, and choose Site Menu to link it to the Lightbox
Save & Preview your design
You might have to make some adjustments and alignments before publishing the final version. However, it can be done relatively quickly with the same hit and trial method and finally ensuring in the preview that everything is in its place.
The Code Way To Mega Menu in Wix
If you’re generally intimidated by code, then this way to code is strictly for YOU.
Yes, you heard that right. Let us find out the step-by-step way to how you can achieve a MEGA Menu in Wix with a little bit of code around.
First things first, turn on the Dev Mode on your dashboard
Add a button to the menu above, and make the necessary changes you like, such as the aesthetics
Please choose from the elements and add a box below the newly added button so that it looks like a container box consisting of the images and content of the MEGA Menu
Add the necessary images and text you want in your menu
Now, click on Tools and choose Layers to ensure it is considered to be included in the Header instead of the Page
Click on the Button element and rename it in the Properties Panel.
Go to the Masterpage.js, and under Default Values check on ‘Hidden’
Scroll down to the Event Handles section below and select onMouseIn
Copy the following code and insert it in the code section:
mousein - show event)
export function menu_mouseIn(event) {
$w("#bigmenu").show();
After inserting the MouseIn event, you also need to work on the exit event
Select MouseOut from the Event Handlers section
Insert the same code under the events function, just by replacing ‘show’ with ‘hide’
Save and preview your code before publishing it live
Conclusion
A MEGA Menu can add a ton of aesthetic value to your Wix website and its functionality. However, while designing your MEGA Menu, the critical thing to note is to keep it straightforward and easy to navigate.
The primary goal of the MEGA Menu is to redirect the audience to the correct locations on your website.