Dropdown pane on leave

Support
#1

Hello there,

Pretty sure I’m just missing something and this is an easy fix.
How do I decrease the time that the dropdown pane stays open after my mouse leaves the area. I have multiple dropdowns side by side so if I hover over one menu item and the dropdown shows up the next one overlaps. I like the delay but I’d rather have it go away twice as fast
Site is local at the moment so I can’t share URL but I’ve included a screenshot.

#2

Hi There,

Please add this custom CSS under Customizer > Custom > Global CSS:

ul.sub-menu.x-dropdown {
    transition-delay: 0s, 0s, 0s;
    transition-duration: 0s, 0s, 0s;
}

Let us know how it goes!

#3

Thanks!
I think I can make it work with this but I actually meant the delay on the other side.
You code removes the delay up front but I want the delay to end either immidiatly or faster after I move my mouse away.

#4

Hello There,

Thank you for the clarifications. To resolve your issue, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.desktop .menu-item.x-active>.sub-menu {
    display: none !important;
}

.desktop .menu-item:hover>.sub-menu {
    display: block !important;
}



.x-navbar .desktop .x-nav > .x-active > a {
    box-shadow: none !important;
}

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: inset 0 4px 0 0 #ff2a13 !important;
}

I am assuming that you are using Integrity stack. If this code does not work please provide us the current stack that you are using.

Cheers.

#5

Thanks again - I’m not sure if that code did anything or at least not to my eye.

I’ve attached a video to show my problem (apparently I left my music on, apologies for that)

#6

Hello There,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#7

I pushed the site to a dev server so you can have a look:
http://hftldev.com/

I’ve created two headers, one for home and one for global it happens on both.

#8

Hi there,

Sorry for the confusion and unfortunately, this isn’t possible. It’s controlled by javascript by toggling the class x-active, and it’s bound to the certain duration that can’t be changed by CSS. Though, I’ll add this as a feature request: slight_smile:

Thanks!

#9

So my only option is to use a different menu option (like mega menu) instead of the pro one?
It really is not usable right now.

#10

Hello There,

You may use this code to lessen the transition:

.x-menu .menu-item .sub-menu.x-active,
.x-menu .menu-item.x-active .sub-menu.x-active {
    display: none !important;
}

.x-menu .menu-item:hover .sub-menu.x-active,
.x-menu .menu-item.x-active:hover .sub-menu.x-active {
    display: block !important;
}



.x-menu > li > .x-anchor .x-anchor-particle-primary,
.x-menu > li > .x-anchor.x-active .x-anchor-particle-primary {
    opacity: 0;
    transition: none !important;
}

.x-menu > li:hover > .x-anchor .x-anchor-particle-primary,
.x-menu > li:hover > .x-anchor.x-active .x-anchor-particle-primary {
    color: white !important;
    transition: none !important;
    opacity: 1;
}

Hope this helps.

1 Like
#11

Excellent! That did the job perfectly!!

#12

Great! Its good to know that it has worked out for you.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.