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

Store Design
,
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

3

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