Mega Menu - Linking the main button

Ask the community
,
4

Hey!

It’s not currently possible out of the box, but with a little bit of Velo, you can achieve the desired outcome :muscle:

Here’s the foundation of the code:

$w("#horizontalMenu1").onItemClick((event) => {
    let label  = event.item.label
    if(label === "Mega Menu") {
        //action
    }
})

And a quick video to show how to get it setup.

And finally, here’s a short summary of what’s happening in the video:

  • The code is run in the masterpage.js file (which means it runs on all pages)
  • When a menu item is clicked, it will get it’s label. If the label matches one of the conditions, it will run that condition.
  • What we’re doing in the video is this:
    • If the label clicked is “Mega Menu”, then use wixLocationFrontend to move to the page that has a slug of “/mega-menu”
    • If the label clicked is “Services”, then use wixLocationFrontend to move to the page that has a slug of “/services”

(Worth noting that the conditions are case sensitive - so if the menu label is “Mega Menu”, it should be that in the code. Not “mega menu”, “Mega menu” etc.)

Hope this helps - and I’ve also shared this feedback with the team :slight_smile:

2 Likes