Docs

[Gnomo Bàgnolo]

Hi

On page https://www.ilsentierodeglignomi.it/la-magica-favola-di-gnomo-bagnolo/
I have an issue with Mobile Menu

On my Site you have already suggested me these customizations:

CSS

/* Fixed Top on MOBILE */
/* ============================================================================= */

@media (max-width: 979px){
  .x-navbar-fixed-top, 
  .x-navbar-fixed-left, 
  .x-navbar-fixed-right {
    position: fixed;
  }
}

JavaScript

// Auto-close MOBILE Menu after click 
// =============================================================================

jQuery(function($) {
$(".x-nav-wrap.mobile a").on( "touchend click", function() {
     $('.x-btn-navbar').click(); 
});
});

// Fixed Top Navbar on MOBILE - Breadcrumbs not visible
// =============================================================================

jQuery(function($) {

  var $body   = $('body');
  var $navbar = $('.x-navbar');

  if ( $body.hasClass('x-navbar-fixed-top-active') && $navbar.length > 0 ) {

    var boxedClasses = '';

    if ( $body.hasClass('x-boxed-layout-active') ) {
      boxedClasses = ' x-container max width';
    }

    $(window).scroll(function() {

      if ( $(this).scrollTop() >= 55 ) {
        $navbar.addClass('x-navbar-fixed-top' + boxedClasses);
      } else {
        $navbar.removeClass('x-navbar-fixed-top' + boxedClasses);
      }

    });

  }

});

Now I would like to resolve an issue with Sub-voice of the MOBILE Menu:
http://prnt.sc/eknlko

When I click on a Menu-item with a sub-menu-item, the menu closes instead expand the sub-menu

Do you have any suggestions?

Is there any news about Best Practice on Fixed Top MOBILE Menu?

Thank You

[Rad]

Hi there,

Please implement the code mentioned here https://community.theme.co/forums/topic/mobile-nav-bar-3/page/2/#post-1408715

That should do it.

Cheers!

[Gnomo Bàgnolo]

Hi Rad
thank You for your support

I’ve implemented the code suggested, but the issue seems to be NOT resolved.

Any ideas?

Thank You

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

[Gnomo Bàgnolo]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for providing the information. Please have this js code updated and make use of this code instead:

jQuery(function($) {
  $(".x-nav-wrap.mobile a").on( "touchend click", function(e) {
    if ( $(this).hasClass('menu-item-has-children') ) {
      e.preventDefault();
    } else {
      $('.x-btn-navbar').click(); 
    }
  });
});

Hope this helps. Kindly let us know.

[Gnomo Bàgnolo]

Hi There

Thank You for your support

I’ve updated my js code as suggested, but the result doesn’t change…

Mobile Menu always closes when I click an item, even if the item has children items

Please, try yourself ON MOBILE, with the item “IL TERRITORIO” that has two children:
– a Piedi
– in Bici

When I click on “IL TERRITORIO” item, the Menu closes, instead of show me the two children items

Thank You again

[Rue Nel]

Hello There,

Thanks for updating in! By default, the menu will go to the link that is assigned to the menu item. Since your menu item has a submenu, it will go the link will not open the submenu. You have to hit the arrow down to be able to view the submenus. You might need to modify the code again and make use of this code:

// Fix if MOBILE Menu item has children  
// =============================================================================

jQuery(function($) {
  $(".x-nav-wrap.mobile a").on( "touchend click", function(e) {
    if ( $(this).parent('.menu-item').hasClass('menu-item-has-children') ) {
      //e.preventDefault();
      console.log('with submenu');
    } else {
      $('.x-btn-navbar').click(); 
      console.log('no submenu')
    }
  });
});

Please let us know if this works out for you.

[Gnomo Bàgnolo]

PERFECT !!!

Now it works fine !!!

Thank You very much Rue !!!

[Rue Nel]

Hey There,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

Cheers.

[Author]

Posts