Mega Menu Dropdown Issue

Support
#1

Hi, I am building Mega Menu following this youtube: https://youtu.be/8_VsXYSlHH4?si=J1yCiO_jqExrheSu
I had a css code to change the background color when Dropdown is Active, the issue is that when the Dropdown is closed, it has a flickering background color and it is not smooth. Is there a way to prevent that?

#2

Hello @sbxstrategies,

Thanks for writing in!

You may need to change your transition effect to ease-in-out.

$el {
     transition: background-color 200ms ease-in-out;
  background-color: transparent;
}

$el:has(.x-active) {
/*     background-image: url('/wp-content/uploads/2025/10/Header.webp');
    background-size: 100% auto;
  background-repeat: no-repeat;
  background-position:center; */
  background-color: #1d285c;
}

Adjust the transition delay to match the transition of the dropdown.

Hope this helps.

#3

Hi I tied the following code and adjust the delay, but it still feel odd. When the modal-popup close, there are two rectangle fade-out. Wondering if this is a bug in modal?

Thanks

#4

Hello @sbxstrategies,

That two rectangle that you were referring to is the result of your custom CSS not targeting the Bar element. You should be using this one to eliminate those rectangles:

$el.x-bar {
 transition: background-color 100ms ease-in-out;
background-color: transparent;
}

$el.x-bar:has(.x-active) {
/*     background-image: url('/wp-content/uploads/2025/10/Header.webp');
    background-size: cover;
  background-repeat: no-repeat;
  background-position:bottom; */
  background-color: #1d285c;
}

Best Regards.