Mega Menu - Slide Down and Up Animation

How To
1

Hi everyone,

I’ve recently added a mega menu with products to my website and set up a slide-down effect using translateY(-100%) to translateY(0%) on hover with transition: transform 2s ease;. However, I’m running into an issue: when I hover off the menu item, the mega menu disappears instantly.

I would like to have a slow, smooth slide-up effect when moving the mouse off the dropdown item. How can I achieve both a smooth slide-down and slide-up effect?

There is an inline style that Bricks add to the drop down item, that I think problem.

  • style=“–brx-dropdown-height-before: -2px;” for the active drop down item
  • style=“–brx-dropdown-height-before: -240px;” for the inactive drop down item

Thanks
Esta