PRO - Navigation Collapsed model in header will not close on a mobile when you click a link

When you click a link that references an ID on the same page on the collapsed menu whilst on a smartphone you can sometimes see that the site has moved in the background but the navigation menu will not close after you click. I have tried all of the CSS and JS code that i have found on this forum and none of them work. All i want to happen is for the collapsed menu to collapse when a link is clicked. Hope you can help.

Hi There,

Please share your site URL so we can check your setup. Please note that Pro doesn’t support One Page navigation yet. It is only working for X theme at the moment. Regular link to hashtag will work but not adding hashtag section ID on menu URL.

Thanks Lely,

URL is: http://hadleylearningcommunity.org.uk

Hi There,

Thank you for the URL. This is because as stated, PRO doesn’t support one page navigation function yet. We can provide this jquery fixed but with understanding that it might not work in the future depending on your site settings/structure. Feel free to remove this code once the function is available on future release. Also note that any issues that will arise from customization is outside the scope of our support. Thank you for understanding.

jQuery(function($) {
    $('.hm16.x-off-canvas .x-anchor').on( "click touchstart", function() {
$('.x-off-canvas-close').click();
});
});

Hi @Lely ,

Sorry i am only picking this up now. Where do you insert the jquery code?

thanks

Chris

Hello @King,

Thanks for updating thread. :slight_smile:

You can add the JS code under Pro > Theme Options > JS. I have recorded a screencast that you can refer. https://cloudup.com/cyWK3euaqHl

Thanks.

Hi @Prasant @Lely,

I have added the code but unfortunately the menu still does not close when you click on a link such as vision or contact. The web URL is: http://hadleylearningcommunity.org.uk/

Is there anything else that i can do?

thanks again

Hi,

Kindly change the js code to this.

jQuery(function($) {
    $('.hm14.x-menu.x-menu-modal .hm14.x-anchor').on( "click touchstart", function() {
           $('.x-modal-close').click();
    });
});

Hi @paul.r

That has worked! Awesome stuff. Thank you very much for this guys. Much appreciated. Have a good weekend :slight_smile:

You’re welcome! :slight_smile: