Modifying main-menu & mega-menu transition / speed (snappy menu)

Hi

I’m using the construction theme and have a couple of menus and mega menus. I’d like the menus to be snappy. Currently there is a delay / transition which I feel is unappealing.

Looking through the forums there are a few topics.

#top #avia-menu .sub-menu {
opacity: 0 !important;
}

#top #avia-menu li:hover > .sub-menu {
opacity: 1 !important;
}

^^^^ the above code creates the desired effect for standard menu dropdowns but breaks the mega menu (all links are hidden / black)

#top #avia-menu .avia_mega_div {
opacity: 0 !important;
}
#top #avia-menu li:hover > .avia_mega_div {
opacity: 1 !important;
}

^^^^^ the above code fixes the mega menu breaking, however there is still a delay (without fade effect) moving between mega-menu dropdowns. The normal menu dropdowns are now snappier but still have a transition effect applied.

js > avia.js, look for this code around line 1202:

sublist.stop().css({visibility:’visible’}).animate({opacity:1});
sublist.stop().animate({opacity:0}, function()

^^^^^ the above code is recommended to be included in the avia.js file which removes the timing components of the fade animation in/out completely.

I’d like to test the javascript edit – but with my child theme, what is the best way to implement this? I have only style.css and functions.php when I go to “theme file editor”.

Additionally, if there is a CSS fix like the first example which also works for the mega menu that may be useful to me and anyone else who stumbles upon the topic :)

… generally in cases such as this, if there is a fix via JS or CSS, which is typically the better solution? I am assuming the JS fix is the more proper remedy unless for example there are elements you want to use the effect and others you do not… and you would then use CSS as an on/off switch of sorts.

Still learning appreciate all your help