Unhover Intent / MegaMenu disappears too quickly

Dear Team @ BeTheme, 

Thank you for a great and versatile theme.  At this point - BeTheme is my favourite Wordpress Theme. 
I have spent approx 3 months building an advanced site powered by BeTheme / VC. 

Now I am facing an issue that I can't resolve or even find the code to adjust.

Summary: I would like to increase the timeout when my mouse stops hovering on a menu item or sub-menu item. Can anyone help me set it up so the sub-menus stay visible for .5-1 second after the mouse moves off? Thanks in advance.

In more detail: 
The mega-menu displays instantly when I hover over the parent menu item but disappears instantly if I move the mouse off the parent menu item. 

This creates problems with mouse paths.

As I only have one parent menu (like Netflix only has browse), if I move the mouse to the left or right of that (instead of down), the whole mega menu disappears before one of the sub-items can be selected.  This creates a frustrating user interface experience. 

So I am trying to find a way to set "unhover intent" or set a delay for the menu to disappear when you move the mouse off the mega-menu submenu or parent item, the menu stays visible for 0.5s.  

I (don't think) I can use CSS transition because it seems you use Jquery to change the display property of the mega-menu, and the menu switches from display:block to display:none. 

The following two pages talk about this problem for menus: 

A good explanation about this user interface problem: 
http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

An example of a solution - with an unhover intent delay - however, I can't figure out how to apply this to the muffin mega menu.  
https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/ 

You guys should code an on-mouse out / unhover intent delay into your mega-menu in the interface. 
Details like this are the difference between good themes and the very best themes.  

For now, can you advise how I can fix this issue?

Comments

  • Hi,

    what you ask for, requires files customization what in reference to Item Support Policy is not allowed. So if you want to modify files and don't know how, you should contact with your web developer. Or if you don’t have any, fell free to contact with our colleagues who offer such service via https://sweetwp.com/ - we strongly recommend those guys as they know BeTheme product very well.

    P.S. For all javascripts/timeouts is responsible js/scripts.js file.

    Thanks for understanding!
  • Hi, would it be possible to point me to the line / area that controls the hover behaviour of the mega menu?  

    Then either I can figure it out or maybe find someone else who can?  It is not obvious where the hover visibility toggle takes place?

    BTW, you should implement this in a future release. Presently, there are usability issues with this menu based on mouse path. 

    Many thanks! 
  • We are sorry but like we wrote above, files customization are not allowed. So if you don't know where to look, you need to contact with your web developer who would be responsible for all modification in the future.
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.