Mega menu fade in menu not showing until i hover over it

Store Design
,

Topic summary

A user implemented a fade-in effect for their mega menu but encountered an issue: the “shop” menu item becomes invisible until hovered over. They want the menu item to remain visible while keeping the fade effect.

Original CSS approach:

  • Applied opacity transition to .mega-menu element
  • Set default opacity to 0, changing to 1 on hover

Proposed solution:
Another user suggested modified CSS targeting .mega-menu__content instead, which would:

  • Keep the menu item visible
  • Apply fade effect only to the dropdown content

Current status:
The original poster tested the suggested CSS code but reported it does not work. The issue remains unresolved and requires further troubleshooting.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I added a fade effect on my mega menu, whe you open the store the menu “shop” is not visible until you hover over it. The fade works fine.

How can I change that the mega menu fades it but the menu “shop” is always vissable?

I aded this code for the fade in effect:

.mega-menu { opacity: 0; transition: opacity 0.3s ease; } .mega-menu:hover { opacity: 1; }

Screenshot 2024-12-02 at 21.10.55.png
Screenshot 2024-12-02 at 21.10.55.png2876×548 168 KB

Screenshot 2024-12-02 at 21.11.02.png
Screenshot 2024-12-02 at 21.11.02.png2906×852 156 KB

2

Hi @JoaquinExcitare ,

I have written an updated CSS to achieve this. Please use below CSS to fix this issue.

.mega-menu .mega-menu__content{ 
    opacity: 0; 
    transition: opacity 0.3s ease; 
} 
.mega-menu:hover .mega-menu__content{ 
    opacity: 1; 
}

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

1 Like
3

Hello, thanks for your respond. This code does not work.