Navigation dropdown toggle on hover

[Frimatek]

Hi,

I’ve used the solution provided in https://theme.co/apex/forum/t/pro-header-navigation-dropdown-appear-on-hover-over-toggle/66320/4?u=frimatek to toggle the navigation dropdown on hover instead of click. The issue I’m running into with this solution is that upon moving the cursor to the dropdown (to click a link in the navigation), the dropdown is closed. This is happening because the close action is set to trigger upon leaving the toggle.

Do you have any suggestions for how to change this behavior?

Thanks!

[ruenel]

Hello @Frimatek,

Thanks for posting in!

With the hover() function,

• https://api.jquery.com/hover/

you can skip any events when you hover out of the element.
Perhaps you can update the JS code and use something like:

(function($){
  var W = $(document).width();
  console.log(W);
  if ( W > 980){
    $( '.x-anchor[data-x-toggle="1"]' ).hover(
      function() {
        $( this ).trigger('click');
      }, function() {
        // do nothing
      }
    );
  }
})(jQuery);

Hope this helps.