How to create a sticky fusion mega menu dropdown for Avada

Some of you might notice that once you have created a fusion mega menu dropdown in Avada, once it appears, if you move your mouse just slightly out of its bounds, the dropdown will disappear.

This can be pretty frustrating when trying to navigate around the menu when it’s so easy for it to disappear.

So to create a sticky dropdown (it’ll stay open regardless where your mouse pointer is), and only closes once you start scrolling on the page, then this is the code for you.

 

Copy and paste the above code into the “Space before </body>” box found in

Avada->Theme Options->Advanced->Code Fields (Tracking etc.)

 

 

Any questions let me know!

By |2016-11-22T03:39:36+00:00November 9th, 2016|gist|7 Comments

About the Author:

Andrew Golightly is the lead web developer here at Golightly+. He is a passionate fullstack JavaScript developer. And creates native apps too using React Native. To balance his love for coding, he also works as a counsellor.

7 Comments

  1. Brent February 4, 2017 at 8:28 pm - Reply

    Hey Andrew,

    I just implemented your code and as soon as i hover over the menu flickers and then goes away. Is there a change I need to make to the code to make it stick.

    Thanks,

    Brent

    • Andrew April 16, 2017 at 1:44 am - Reply

      Hey Brent! Looks like Avada has updated their code again so this breaks. Are you still wanting this mega menu to stick?

  2. Emmi February 13, 2018 at 1:16 pm - Reply

    Hi Andrew, the code didn’t work for me, but I read your comment and now know updates are the reason. I’d still be interested in a sticky megamenu dropdown if you have the updated code.

    • Andrew February 27, 2018 at 7:27 pm - Reply

      Hi Emmi. Which version of Avada are you using? The latest?

  3. German Rodrigo August 8, 2018 at 8:49 pm - Reply

    Hola

    He seguido los pasos para crear un mega menu en avada pero me parece muy complicado

    Alguen vio este tutorial?

    http://quadmenu.com/how-to-create-a-mega-menu-in-the-avada-theme-for-wordpress/

  4. Mandy December 10, 2018 at 2:42 pm - Reply

    Hello,

    Is there a way to show the mega menu on click instead of on hover?

    Thanks!

  5. seb March 8, 2019 at 8:19 am - Reply

    Hello Andrew,

    Thanks for your tipes :)
    I have the same question that Mandy asked.
    Do you know a way to show the mega menu on click instead of on hover ?
    It’s shame that avada don’t offert this possibility with the mega-menu :)

    Have a good day

    Avada version: 5.2

Leave A Comment