Opacity issue with drop down mega menu Dawn Theme

[404virtues]

Hi there,

I’ve got my header working pretty well, I just have one issue.

I’ve added some code to allow a small fade transition after hovering the mouse over a menu link.

This is the code I used from another user within Shopify Community.

.mega-menu {
position: static;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

.mega-menu:hover {
opacity: 1;
}

However, the menu links are transparent before hovering over them which is not what I want.

(Missing Menu Link)

(after hovering mouse over the menu link)

If I remove the aforementioned code the mega menu drop down works fine, but I like the fade effect the code produces, and would like to use it.

Website is: https://404virtues.com/

[Dan-From-Ryviu]

Please update the code to this and check

.mega-menu {
position: static;
transition: opacity 0.3s ease-in-out;
}
.mega-menu:hover {
opacity: 1;
}

[404virtues]

Hi there,

This brings back the menu-link but removes the fade effect.

I should say I added the code to component-mega-menu.css

I forgot to mention that.

[404virtues]

Hi there,

That completely removes the links within the menu.

[404virtues]

It should have the ‘outerwear’ link option

[404virtues]

Hey thanks for the help, but this code didn’t create a delay with the drop down menu, it still abruptly drops down by default.

The only code that I found that makes a delay with the menu drop down is this (however the link disappears from the menu although when you hover over it the menu still opens up underneath it.)

.mega-menu {
  position: static;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.mega-menu:hover {
  opacity: 1;
} 
 

(What it looks like with code)

When you move the cursor over the link.

[404virtues]

Thanks for all your help, but the fade effect doesn’t work with this code.

[Vilcka]

You solve it? i have the same issue