Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Elementskit megamenu

On our website, when we move the mouse over the mega menu, it disappears immediately.

I would like it to go away after 200-300ms because in the mega menu we have a form, when someone clicks on "hint" – the menu will disappear before selecting it.

@media (min-width: 1025px){
    .elementskit-megamenu-has .elementskit-megamenu-panel {
        transition: 300ms !important; //your desired time in milliseconds
    }
}

So far we have tried with the above code but unfortunately it won’t help.

Tags:

2

Answers


  1. 0

    Depends what is the CSS that is applied when the mega menu panel is going invisible.
    If it is display: none; to display: block;, and vise versa, I’m pretty certain that you can’t apply transition effects to the display property.

    If you can share your website for further investigation would be very helpful.

    Login or Signup to reply.
  2. 0

    It seems like you’re trying to add a delay to the mega menu’s disappearance on mouse out. The CSS transition property is used for animating the changes in CSS properties, but it won’t introduce a delay on its own. To achieve the desired delay before the mega menu disappears, you should use the transition-delay property.

    — Here is code —

    @media (min-width: 1025px) {

    .elementskit-megamenu-has .elementskit-megamenu-panel {

    transition: opacity 300ms ease,

    visibility 300ms ease,
    transform 300ms ease;
    transition-delay: 200ms;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    }

    .elementskit-megamenu-has:hover .elementskit-megamenu-panel {
    opacity: 1; 
    visibility: visible; 
    transform: translateY(0); 
}

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search