Mega menu fade in/out

[Ravenwoodstore]

Hi guys,

store: ravenwood.store

pass: moths

I'm looking to add a fade in/out transition to the mega menu, so that when you hover over it, it opens up with a fade, then when you leave it, it fades back out, instead of being instantaneous. 

I've tried to add this code:

.mega-menu {

opacity: 0;

transition: opacity 0.3s ease;

}

.mega-menu:hover {

opacity: 1;

}

But this hides the links in the mega menu until you hover over it. (The fade works however!) 

How can I have this fade effect, but also have my menu buttons visible at all times?

Without code: buttons are visible at all times:

With code: missing buttons:

Thanks!

[websensepro]

Hi @Ravenwoodstore , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[Ravenwoodstore]

Hi  @websensepro ,

store: ravenwood.store

pass: moths

Thanks

[topnewyork]

Hello @Ravenwoodstore ,

You're close! The issue with your current approach is that you're applying the opacity: 0 directly to .mega-menu, which hides the entire menu (including the container that should become visible on hover), not just animating it in and out.

Try this code
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag

.mega-menu {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu-item:hover .mega-menu {
  opacity: 1;
  visibility: visible;
}

You can also add pointer-events: none  to .mega-menu by default and enable it on hover:

.mega-menu {
  pointer-events: none;
}

.menu-item:hover .mega-menu {
  pointer-events: auto;
}

[Ravenwoodstore]

Hey @topnewyork ,

I added the code but it doesn't seem to do anything. The menu doesn't have a fade in/out effect active on it. 

thanks!