[Wardo_SDParticipant]

Hello,

I have a really dumb question for you. My client wants the submenus to display only when the arrow next to the top level nav item (icon stack) is clicked. Is there a way to do this? They do not want submenus to display on hover.

The URL of the project is http://bridgeint.wpengine.com/home/

Thanks!

[RahulModerator]

Hi,

Thanks for writing in!

You can use following under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
  var nav = $('.desktop .x-nav'),
      target = $('.x-navbar .desktop li.menu-item-has-children');

  nav.off('focusin focusout mouseenter mouseleave');

  target.on('click touchstart', function() {
    $(this)
      .siblings(target)
        .removeClass('x-active')
      .end()
        .toggleClass('x-active');
  });
});

This code is a basic idea that will enable the click event instead of hover. If you need more in depth changes e.g., hide the dropdown when click outside the menu, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks!

[Wardo_SDParticipant]

Unfortunately this fix is not going to work for me. It achieves the drop down only on click, but the link of that top level nav item is still active, so when you click it to open the sub menu, that top level link is opened.
is there a way to get only the arrow to open the drop down menu?

[Rue NelModerator]

Hello There,

I am another staff checking on this topic. Please update the JS code. You can make use of this code instead:

jQuery(document).ready(function($) {
  var nav = $('.desktop .x-nav'),
      target = $('.x-navbar .desktop li.menu-item-has-children');

  nav.off('focusin focusout mouseenter mouseleave');

  target.on('click touchstart', function(e) {
    $(this).addClass('x-active');
    e.preventDefault();
  });
});

Please let us know if this works out for you.

[Wardo_SDParticipant]

That code will not work either. There are several problems that come up when I use it.
1. menus will not close.
2. top level nav item cannot be accessed at all.
3. multiple submenus can all be opened at once and they stack on top of each other.

Thanks so much for the help so far, I really appreciate it. You guys are always so helpful, even though I know the situations I bring to you all aren’t always the easiest to figure out.

Thanks again!!

[RadModerator]

Hi there,

Please change the code to this,

jQuery( function($) {

$('.x-navbar .desktop .x-nav>li.menu-item-has-children > a span').append('<i style="display:inline-block; padding: 2px 3px; position: relative; bottom:-1px;" class="x-icon arrow" data-x-icon="&#xf103;"></i>');

$(document).ready ( function() {

$('.x-navbar .desktop .x-nav>li.menu-item-has-children > a').on('mouseover', function(e){ e.stopPropagation(); } );

$('.x-navbar .desktop .x-nav>li.menu-item-has-children > a span .arrow').on('click', function(e){

e.stopPropagation();
e.preventDefault();

$('.x-navbar .desktop .x-nav>li.menu-item-has-children').removeClass('x-active');
$(this).parent().parent().parent().toggleClass('x-active');

} );

} );

} );

Then please add this CSS to Admin > Appearance > Customizer > Custom > CSS to hide the old arrow.

.x-navbar .desktop .x-nav li>a>span:after {
display: none !important;
}

Hope this helps.

[Wardo_SDParticipant]

Hey it worked! Thanks so much you guys this did exactly what I was trying to achieve. I really appreciate it! You guys are the best!!

https://m.popkey.co/937bf4/xlQJA.gif

[ThaiModerator]

Thanks for your kind words 🙂

If you need anything else please let us know.

[Author]

Posts