Pro Header Navigation Dropdown Appear on Hover over Toggle?

[Sophiamp]

Hello,

I am using a few different dropdown navigations in my header, where the toggle is just an icon. At the moment the user has to click on the toggle for the dropdown to appear. Is it possible to have it appear on toggle hover?

Thanks

[rad]

Hi @SophiePeirce,

Thanks for reaching out.

What do you mean by different dropdown navigation? The dropdown element is always triggered by hover, while the collapsed element is triggered by click or touch and meant for touch devices. You should use dropdown element for desktop if you plan on having a dropdown that is triggered by hover, then use collapse element on mobile. Then simply control the visibility of each element for each device using hide during breakpoints feature. https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

Thanks!

[Sophiamp]

Hello - by different I mean I have a few different menus being displayed (two different elements) but both drop down menus - one for account items, one for user activities.

My dropdown elements/menus are not triggered on hover - only on click.

Here is a screen shot of what happens on click - that i would like to happen on hover…

[ruenel]

Hello @SophiePeirce,

Thanks for the clarifications.

Please be advised that there is no hover events in mobile touch screen devices which is why you need to click the Navigation dropdown element in order display the items in it. You can only show it on hover with a little help of using custom javascript. Please add the following code in the custom JS section:

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

This code will only work with screen sizes that is bigger than 980 pixels to avoid any issues in mobile devices.

We would love to know if this has worked for you. Thank you.