Transition on Mega Menu

[LDLC_Shop]

How do I add a 0.3 seconds transition when opening up the mega menu? So the opacity slowly changes in and out.

Page: longdistanceloveclub.com
Pass: edimar123

[B2Bridge]

Hi @LDLC_Shop, you can follow our instructions:

Step 1: Open Online Store -> Themes -> Edit code.

Step 2: Find component-mega-menu.css file.

Step 3: Paste this code at the bottom of the file.

.mega-menu__content {
    transition: opacity 0.3s ease;
}

If this helpful, please let us know by giving us a like and marking its as a solution. Thanks you 😍

[DaisyVo]

Hi @LDLC_Shop 

I don't quite get your idea, could you please describe further and share me the screenshot of that section?

Best,

Daisy

[dws_pvt_ltd]

Hello @LDLC_Shop, Please follow these steps to add this CSS code:
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your "component-mega-menu.css" CSS file. 
5. Find the mega-menu CSS of ".mega-menu[open] .mega-menu__content".
6. Add the following code in the ".mega-menu[open] .mega-menu__content".

.mega-menu[open] .mega-menu__content {
    opacity: 1;
    transform: translateY(0);
    transition: 0.5s ease-in-out;  /* add this new CSS for smooth transition*/
}

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

[topnewyork]

Hi @LDLC_Shop 
1. Go to Online Store -> Theme -> Edit code.
2. Open component-mega-menu.css

.mega-menu[open] .mega-menu__content {
opacity: 1 !important;
transform: translateX(0%) !important;
animation: animateMenuOpen var(--duration-default) ease !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!