Menu transition too slow

Support
#1

Hey there,
the submenu of my site is cling a little to slowly for my taste please check the video I attached.
Furthermore I experienced a weird styling issue, where elements start to jump around when the cursor is hovering above them. Its all in the video.
Thanks for your help!
Denis

#2

Hello Dennis,

Thanks for writing in! I have checked your site with different browsers and I could not replicate the issue. Do you have any caching plugin or a plugin that minifies the JS/CSS scripts which could be the cause of the issue. Please clear your plugin caches and the browser cache too. You may use private browsing mode or the incognito mode and test again.

Please let us know how it goes.

#3

there are no plugins activated and I checked in the newest chrome version, I always use the non cached version.
The issue with the slow menu seems to exist in chrome. is what do I need to change in order to get the submenu to close faster after the cursor left the buttons?

#4

Hi @zerotoone.de,

It seems to be working, and the one in your video is the default speed which can’t be changed. And it just appear slower since there are many sub-menu opening and closing.

Or do you wish to make the appearing and disappearing instant like normal hover?

Thanks!

#5

I would love to have it disappearing instantly :slight_smile: Thank you

#6

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

ul.sub-menu.x-dropdown {
    transition-delay: 0s, 0s, 0s !important;
    transition-timing-function: ease-in-out !important;
}

For more information, please take a look at this:

https://www.w3schools.com/css/css3_transitions.asp

Hope it helps :slight_smile:

#7

Hey there, I tried this code, but it still seems delayed, could you please try another code?

#8

Hello @zerotoone.de,

Please have the custom css updated and use this:

.x-menu-inline>li ul.sub-menu.x-dropdown {
  transform: none;
  transition-delay: 0s, 0s, 0s !important;
  transition-timing-function: ease-in-out !important;
  opacity: 0;
}

.x-menu-inline>li:hover ul.sub-menu.x-dropdown {
  visibility: visible;
  opacity: 1;
}

.x-menu-inline>li .x-anchor-menu-item,
.x-menu-inline>li .x-anchor-menu-item.x-active {
    background-color: transparent;
    transition-duration:0s, 0s, 0s !important;
    transition-timing-function: ease-in-out !important;
}

.x-menu-inline>li:hover .x-anchor-menu-item{
    background-color: rgb(236,98,84) !important;
}

Please let us know how it goes.

1 Like
Style parent header bar (x-bar-container) when hovering child (.x-anchor-text-primary)
#9

Thank you, works great!

#10

You’re welcome, Denis.

#11

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