Close fixed mobile menu after click

[cvdw]

Hi,

On this One Page Menu test site, I ised this JS to close the fixed mobile menu after clicking:

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

But it now works only once and after one click the mobile menu is not collapsing any more…

I can’t see why it’s not working anymore, Can you have a look please…?

This is the site: https://bubbels.nl/wp/

Thx, Carel

[ruenel]

Hello Carel,

Thanks for writing in! Be advised that there is no Click event in touch devices. You only have touch, pinch, tap and double tap. You should be using touchstart in your JS code. Try updating this part .on('click' to .on('touchstart click'

more details about touchstart Event.

Hope it helps,
Cheers!

[cvdw]

Hi, Thanks but in the script a send I don’t see .on('click'…

As you can see, I’m not an JS genius…

Where do I change this or can you give me the complete code…?

Sorry, Carel

[tristup]

Hi Carel,

My colleague refer to the click function that is written into your code $(’.x-navbar .x-nav-wrap.mobile a’).click(function(){ which need to be change like the following

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

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[cvdw]

@tristup

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

Hi!

I tried this code but still, it only works once… If I click the mobile menu again, there is no action.

If I refresh the browser, the menu works again for only 1 click in this One Page site.

There is no other custom script in this page.

Grtz, Carel

Ps. some updates ago, it was working good

[tristup]

Hi Carel,

Glad to know that is is working now.

Thanks

[cvdw]

No, it’s not working… It WAS working before X updates…

See my message in the previous post.

[tristup]

Hi Carel,

Sorry for the confusion. I have checked your website on my Android mobile and found the menu is working fine. I would suggest you check once by clearing type cache including the Style Cache from Cornerstone > Settings > System > Clear Style Cache and check in the incognito/private mode of the browser.

If that does not help, there might be some different reasons behind your issue. I would like to suggest troubleshooting the following common issue to help us to recognize the reason.

1.Theme Related Issue
2.Plugin Conflict
3.Theme Update related issue
4.Child Theme Related issue
5.CSS/JS Customization
6.Disabling Cache
7.Disabling CDN

If you discover that an issue is coming from a custom code or 3rd party plugin, kindly consult with a developer or contact the plugin author. Please note that we do not provide support for custom codes and 3rd party plugins.
If the issue was caused by our theme, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[cvdw]

Hi,

I send you a login.

I disabled all plugins, cleared all cache but still the same problem:
The mobile menu works for 1 click on this one page site: https://bubbels.nl/wp/
I tested on laptop in Chrome and Firefox and on iPhone on Safari and Chrome.

It seams to be working only once on a page.

THX, Carel

[christian]

Hey Carel,

Before I provide you with the updated code, please note that providing custom code is beyond the scope of our support.

The official solution for this is to upgrade to Pro and create a custom header. In the custom header, you need to use the Navigation Layered or Navigation Collapsed element as that has the feature to close the menu upon clicking a menu item.

With that said, we will not update the custom code anymore nor do we guarantee the custom codes provided in this forum are good. Pleaes check our Terms.

(function($){
  // $('#x-btn-navbar').on('click',function()
  // {
  //   console.log('11');
  // })
$('.x-navbar .x-nav-wrap.mobile a').each(function() {
$(this).on('touchend click', function(){
    setTimeout(function() {$('#x-btn-navbar')[0].click()}, 1000);
});
});

})(jQuery);

Thank you for understanding.

[cvdw]

Thank you, Christian,

I allready bought PRO unlimited but this was build in X and was working before so I wanted this to work again.
In the future I will try the make this in the headerbuilder in PRO.

Thank you so far!

Carel

[prakash_s]

You are most welcome Carel.