How To Build A Dropdown Mega Menu in Wix | Wix Website Tutorial

HOW TO BUILD A DROPDOWN MEGA MENU IN WIX | In this video I’m going to show you how to build a mega menu/sub-menu in Wix with relatively few steps involved. This process allows you to quickly implement a nice new navigation tool to your Wix website.

Mega menu's deliver some tremendous value to both you and your user. It adds a new layer of navigation to your website, making it easier to find items quicker. Mega menu's also drive higher numbers of sales and lead conversions because people can access areas of the website they may not have discovered previously.

Building a mega menu in Wix was previously extremely difficult, even impossible. Today, it is more than possible thanks to Wix Corvid/Wix Code. With very few steps, you can have a mega menu up and running in no time.

CHANNEL & MPS ACCOMPLISHMENTS:

-Wix Design Expert
-Wix Certified Trainer
-Wix Partner
-Keynote WixCon Speaker
-Largest Global Wix Influencer
-Largest Global Wix Training Community

CHANNEL GOALS:

-Hit 50,000 subscribers by March 1 (I need your help to get there :)
-Increase engagement on each video (comment down below :)

VIDEO & CHANNEL RESOURCES:

Sign up to your Free Wix Training Academy here:

BECOME A WIX NATION INNER CIRCLE MEMBER (LIMITED TO 10):

GET YOUR WIX ACCOUNT & HOSTING:

MUST-HAVE TOOL FOR YOUTUBE CHANNELS:

Watch more videos on my Wix Training Academy YouTube Channel:

WIX TRAINING + DIGITAL ENTREPRENEUR PLAYLISTS:

"Wix Ecommerce: The Ultimate Guide To Building An Online Store in Wix:

“Building A Social Network in Wix: The Non-Coding Founder's Guide”:

“Corvid by Wix Training Tutorials”:

“Wix My Website”:

“Ascend by Wix: Training Tutorials”:

NEW TO THE CHANNEL? START BY WATCHING THESE VIDEOS:

“Open Q&A”:

“8 Underrated Wix Features You Probably Don't Know About ”:

“5 Ways To Obtain Funding For Your Business”:

“Wix My Website Welcome Video”:

__________

--------------------
Stay Connected:

MPS Message: I wanted to make sure you are aware that this video description contains affiliate links. It is completely up to you whether you utilize these links. Just know that if you use these links, there is no difference to you, but it does partially support this channel :)

[missdino]

Great video in that it got me started with building a mega menu, but incomplete. Here's what it missed and how to resolve some of the issues raised in the comments:

1. The mega menu stays there forever once hovered over.
Solution:
Add another function to the button called 'onMouseOut()'. The code you want to add to it is:
export function {
$w("#megaMenu").hide();
}


2. This only puts the mega menu on one page.
Solution:
Select your container box (mega menu), and right click it. There's a radio switch in the options that appear called 'Show on all pages'. Make sure it's switched on. Then it and anything within it will show on all pages when you hover over your button.


3. Once you've set your onMouseIn and onMouseOut on your button, you'll have the additional problem of the mega menu disappearing as you move into it to select something, and you also HAVE to hover over the button again to collapse it.
Solution:
Add an 'onMouseIn' and 'onMouseOut' function to the Container box this time:
export function megaMenu_mouseIn(event) {
$w("#megaMenu").show();
}

export function megaMenu_mouseOut(event) {
$w("#megaMenu").hide();
}

[towedarray]

This is such a incomplete "tutorial" that you should probably pull it down. Almost all of this is wrong or partially broken. Plus the megamenu stays up forever the way you did it. This is going to cause people more confusion than they had in the first place.

[kevinclarke]

Thanks for the great tutorial, Mike!

I love it when people can find simple, ingenious workarounds for computer problems... I'm definitely eager to try out your mega-menu strategy. I'll let you know how it turns out.

Good luck with your 50K challenge 👍

[PassionateForMusic]

For all those who are struggling to get this to work both in and out, this is the code I used:

export function button_onmouseIn(event) {
$w('#menu').show();
}

export function button_onmouseOut(event) {
$w('#menu').hide();
}

export function menu_onmouseIn(event) {
$w('#menu').show();
$w('#button').disable()
}

export function menu_onmouseOut(event) {
$w('#menu').hide();
$w('#button').enable()
}

Make sure to replace 'menu' with the container box you've used for your drop down menu, and 'button' with the button name of where you're hovering over. This code is thanks to another youtube commentator Charles Delamarre but even though it worked I couldn't get the box to stay put while I hovered away from the initial button - to fix this, I went into the properties panel and deleted the 'onMouseIn' and 'onMouseOut' events and re-added them in but making sure to put the word 'on' before them as for some reason it doesn't automatically do that. Also, I made sure that the button's edge was overlapping my menu a bit, otherwise it would sometimes work and sometimes not.

I'm not a coder myself but managed to get this to work so I do hope this has helped!

[austinfamilyadventures]

Works mate and with that other persons adding with the out opinion is cool. Thanks heaps

[realshannic]

How do you get the properties tool bar to show up?

[desiznknight]

Hi, I am unable to find the properties window for button editing which you have shown in the right top corner, can you guide me, thanks in advance

[Charles-yqvv]

Would using this technique, or using Lightboxes to achieve a similar effect, have SEO ramifications? I'm not sure how Google views this type of menu as opposed to Wix's pre-built menus.

[kaisunluk]

this is great! now i am able to modify the menu with no limitation. One question though, is there a similar tutorial for the mobile menu? would be nice to be able to customise that too!

[tharaabelson]

Great tutorial! I have a few questions, after I hover over the button once the menu does not disapper but rather just stays there until i click on something, how do I make it go away after they stop hovering on theh dropdown menu? 2nd I want to box to scroll down with the page, right now it's only showing up where the block was placed, its also only showing up on the one page. Thanks for your help!

[johanbarnard]

Thanks for the video. Can you tell me what I have done wrong- the megamenu remains after the mouse moves on and doesn’t go away?

[raisemindset]

So Helpful man, Big thanks:)
Keep Bringing such features.

[masharyalenezi]

Hello
I'm trying to do what you are explaining in the video. but in my editor I cant find the " Properties " toolbar that u have on the video. I searched about it but couldn't find a solution. So do you know how can I find or add that properties toolbar.
Thanks

[gartenfeuer_ch]

Good day. Question: is it still possible with the current editor? I can't find the window for the button ID settings. (On your video at minute 7:59) Is this function still available for the buttons? thank you very much.

[TheHeavyend]

Wow, this has opened up a new world for me in Wix. I always thought the plain default drop down menus were always so samey and ugly but this is brilliant. Can you tell me how it functions on mobile view.

[CookingWithMrRobert]

QUESTION: DO I NEED TO KNOW CODING JUST TO DO WHAT YOU ARE SHOWING IN THIS VIDEO?

[MyCrea]

hi, do you know why the sub menus are going up wards instead of down wards like in your videos ? Is it because the header have been move bigger and smaller in size ? or what is the reason for that ?

[TheGLO]

My god this helps a lot for people like me who are a little bit technical but don't know much about coding etc. Thanks man!

[ellblower]

Figured out how to code finally. My drop down menu loads.... but only on the home screen. How can I get it to load on every page?

[pathwayjazz]

What code should be added that when mouse is not on the mega menu and it should be hide? Thanks for sharing