Docs

[Studio172]

Hello!
I would like to collapse the mobile menu on a one page navigation site with sticky menu, when the user has chosen a menu item.

I’ve found this script on your forum:

(function($){
$(‘.x-navbar .x-nav-wrap.mobile a’).on(‘touchend click’, function(){
$(‘.x-nav-wrap.mobile’).toggleClass(‘in’).css(‘height’, 0);
$(‘.x-btn-navbar’).toggleClass(‘collapsed’);
});
})(jQuery);

It works perfect, except that the script also collapses the menu when you press the ‘»’ to drop down the submenu.

Do you have a solution for this?
greetings, Stefan

[Paul R]

Hi Stefan,

You can try this code instead.

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

Hope that helps.

[Studio172]

Hello Paul,
Thanks for your quick answer, but it doesn’t seem to help…
see: http://frank.pilihan.nl/

[Paul R]

Hi Stefan,

Please replace the code with this.

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

Thanks

[Studio172]

Hello Paul,
Thanks, it works a little bit better… but still strangely unpredictable..
Sometimes the menu collapses and sometimes it doesn’t…
greetings, Stefan

[Paul R]

Hi Stefan,

We can make the touch area slightly bigger.

You can add this under Custom > Edit Global CSS in the Customizer.

.x-navbar .mobile .x-nav li>a>span {
    width: 50%;
}

Hope that helps.

[Studio172]

Great, that did the trick for desktop!
But… if I check it on my iphone, I cannot click the ‘»’ anymore…

[Paul R]

Hi Stefan,

We can adjust it some more, please add this code in custom css.

.x-navbar .mobile .x-sub-toggle {
    width: 30%;
}

.x-navbar .mobile .x-sub-toggle i {
    float: right;
    margin-right: 20px;
}

.x-navbar .mobile .x-nav li>a {
    padding:0;
}

.x-navbar .mobile .x-nav li>a>span{
    padding: 1em 0;
}

If that doesn’t help, please provide us your wordpress admin login in private reply.

Thanks

[Studio172]

This reply has been marked as private.

[Jade]

Hi Stefan,

Please update this code:

.x-navbar .mobile .x-nav li>a>span {
    padding: 1em 0;
}

to

.x-navbar .mobile .x-nav li>a>span {
    padding: 1em 0;
    display: block;
}

Hope this helps.

[Studio172]

Am I doing something wrong, it doesn’t seem to help… The menu doesn’t collapse anymore…

[Paul R]

Hi,

The js code was somehow removed. I went ahead and added it back.

I also adjusted the css code.

Kindly check on your end now.

Thanks

[Studio172]

Hello Paul, thanks again for looking into it. On desktop everything is working fine again!
But on my iphone I’m still having an issue…
When clicking on the ‘»’ the menu doesn’t collapse anymore, which is good! But the submenu’s don’t fold out…

[Paul R]

Hi,

I was able to fix it by adding the code below in Custom > Edit Global JS

jQuery(function($) {
     $('.x-sub-toggle').off('click');
 $('.x-sub-toggle').on('click touchstart', function(e) {
    e.preventDefault();
    $(this).toggleClass('x-active').closest('li').toggleClass('x-active');
    $(this).parent().next('ul').toggleClass('in');
  });
});

Kindly check on your end.

Thanks

[Studio172]

Yes! Thanks great!

[Author]

Posts