Mega menu fade in/out

Store Design
1

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:

Ravenwoodstore_1-1750168292160.png
Ravenwoodstore_1-1750168292160.png1244×309 31.4 KB

With code: missing buttons:

Ravenwoodstore_0-1750168259750.png
Ravenwoodstore_0-1750168259750.png1163×312 38.6 KB

Thanks!

2

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

3

Hi @websensepro ,

store: ravenwood.store

pass: moths

Thanks

4

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 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;
}
5

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!