Remove delay when hover out of menu

Support
#1

Hi! On my site (https://anatomifysiologi.se) there is a delay when hovering out from the menu items with sub menus, where the blue color stays visible for about 1 second. There is no delay on the menu items without sub menu. Are there any way to remove this delay? Thanks!

#2

Hey @anatomifysiologi,

Thanks for reaching out!

I check your website but I wasn’t able to replicate the delay when hovering out the submenu. I suspect that this is just a cache on your end, I suggest that you clear your browser cache or use incognito mode when accessing your website.

Hope that helps.

#3

Hi!

Thanks for your reply. Actually what you see is what I refer to as the delay. There is a difference if you compare for example the menu item “Anatomi” and “Quiz”. On “Quiz”, the blue color disappear directly, while on “Anatomi” it stays blue for a little extra.

Hope that made it clearer.

#4

Hi @anatomifysiologi,

Thanks for pointing out your issue! Would you mind sharing your admin credentials so that we can check your setup properly? To do that, please give us the following information in a Secure Note.

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts.

secure-note
secure-note1040×250 15.3 KB

Thank you.

#5

Hi!

Sure, I’ve added the admin credentials. Thanks!

#6

Hello @anatomifysiologi,

Thanks for providing the information. We can see that you added this custom CSS:

/* Menu hover transition */
body .x-masthead .x-dropdown,
body .x-masthead .x-anchor,
body .x-masthead .x-interactive,
body .x-masthead .x-dropdown.x-active {
    transition-delay: 0s, 0s, 0s !important;
    transition-duration: 0s, 0s, 0s !important;
    transform: translate3d(0, 0, 0) !important;
}

This does not affect the delay because, in the stack styles, we have this default transition-delay:

 .x-td, .x-div, .x-row, .x-col, .x-grid, .x-cell, .x-section, .x-acc-header, .x-acc-header-indicator, .x-crumbs-link, .x-paginate-inner>*, .x-anchor, .x-anchor-text-primary, .x-anchor-text-secondary, .x-anchor-sub-indicator, .x-anchor.has-int-content .x-anchor-content, .x-bar-is-sticky, .x-bar-is-sticky .x-bar-content, [data-x-toggle-collapse], .x-graphic-child, .x-image, .x-line, .x-mini-cart li, .x-mini-cart a:not(.x-anchor), .x-modal-close, .x-search, .x-search-btn, .x-search-input, .x-icon, .x-text, .x-text-content-text-primary, .x-text-content-text-subheadline, .x-text-typing, .x-typed-cursor, .x-menu-first-level, .x-menu-layered:not(.x-menu-first-level), .x-wc-add-to-cart-form, .x-wc-shop-sort, [data-x-particle], .x-bar, .x-bar-scroll-button, .x-bar-container, .x-loader, .x-slide, .x-slide-pagination, .x-slide-pagination li {
    transition-duration: 300ms;
}

Using the code above and changing the value to 0 could resolve your issue.

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Best Regards.

#7

Hi!

I’ve added the CSS but unfortunately it didn’t do any difference as I can see. Do you know why that is the case? Thanks for your help!

#8

Hello @anatomifysiologi,

The CSS is not effective and did not use the right selectors. You might want to check this out: Snappier Dropdown Menu

You can modify the code, remove the “>”, change “.x-dropdown” into “.x-particle” and add “!important” in the attribute value.

Kindly let us know how it goes.

#9

Hello!
Thanks. The CSS almost seems to work, but not entirely. I’ve changed the menu now instead since it seems to be hard to fix the delay. Thanks for your help anyway!

#10

You are most welcome.

#11

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