How to close mobile menu when using Page scroll to id plugin
In order to auto-close an opened mobile menu when links that scroll the page are clicked, you’ll need to add some extra javascript in your page or theme template.
This issue is not a problem that comes from “Page scroll to id”, as the plugin has no control over the mobile menu a site is using. The same problem would happen even if you were using other similar plugins or no plugin at all (e.g. the page would “jump” but the mobile menu would still be opened). This issue comes from the fact that most mobile menu scripts do not auto-close the menu, when menu links are clicked, simply because most developers forget that a link might point to an anchor within the same page.
I try to support such issues in order to help users that use “Page scroll to id” plugin, deal with the problem quickly. I typically provide a jQuery/js script that users need to add to their page. Each script is different for each site and created specifically for a single mobile menu.
I can do this simply because I know javascript and I can find quickly how other scripts (like mobile menu script) work. I provide the script(s) for free, but if I help you and you can make a donation, I’d greatly appreciate it 🙂
Where to put the extra script
If your theme provides a field to add javascript code in your theme, you can place the code there. Otherwise, you can simply add the script in your theme/child-theme footer.php template, right before the closing body tag (</body>).
How to request such script
Please leave a comment with the URL of your site/page you need help with and I’ll try to provide the script as quickly as possible.
A typical script looks like this:
<script>
(function($){
$(window).on("load",function(){
$(document).on("click","#mobile-menu-selector .menu-item ._mPS2id-h",function(){
$("#mobile-menu-close-btn-selector").trigger("click");
});
});
})(jQuery);
</script>
If you’re using “Responsive Menu” plugin (by ExpressTech), you can use this code provided by one of our users.
Can I get support if I don’t use “Page scroll to id” in my site?
You can make a donation and request support 😉
Hi, I use beaver builder theme and the page scroll to id works very well on desktop, but on mobile when click on a link doesn’t close the menu.
I tried to use the javascript code that you posted here, but when I put on beaver builder child theme it says that “script” is an “unclosed regular expression”, I tried to erase the “” but does not works too.
Could you help?
“I tried to erase the “script” but does not works”
Hello,
Please post your site/page URL so I can check it and help.
I can’t, is a website of a company, sorry.
But the site was made in beaver builder, and the menu links works well, just don’t close the menu when click on them.
There is a way to solve this?
But I think if translate the script in css, it will work, or no, I don’t know
(function($){
$(window).on(“load”,function(){
$(document).on(“click”,”#prk_menu_els .menu-item .__mPS2id”,function(){
$(“#prk_menu_left_trigger”).trigger(“click”);
});
});
})(jQuery);
<script> (function($){ $(window).on("load",function(){ $(document).on("click","#prk_menu_els .menu-item .__mPS2id",function(){ $("#prk_menu_left_trigger").trigger("click"); }); }); })(jQuery); </script>You can send send it to me privately via email here:
https://manos.malihu.gr/contact
Can you do this?
Unfortunately no, but the theme provides a field to add javascript code, but don’t allow to use the script, it says “HTML detected, the “JavaScript Code” setting only accepts Javascript.”
I tried to change to
</body>but does not works too.Ok, try to add only the js code without the script tag (or any other tags):
(function($){ $(window).on("load",function(){ $(document).on("click","#prk_menu_els .menu-item .__mPS2id",function(){ $("#prk_menu_left_trigger").trigger("click"); }); }); })(jQuery);Doesn’t works unfortunately. Do you think that if write the code in css would work?
Or is there other place to put the script? That certainly will work
Do not add it in CSS.
Yes, you can place the script in your theme template as described in the post:
Edit your theme/child-theme
footer.phptemplate (via ftp or the theme editor) and place the script (with the<script>tags) below the line with thewp_footer()function and before the closing body tag (</body>).Save the file and test.
My child theme does not have anything, there is just “styles.css” and “functions.php”.
But on theme there is the “footer.php”.
I put the code there and updated, but does not works because I use the child theme, and on child theme doesn’t have the “footer.php” file.
I did exactly what you said, and appeared that the code was edited with success (on theme, not on child), but dosn’t works, it looks like a joke but doesnt.
You can either a)add the code directly to the footer.php in the theme’s directory or b)you can copy your theme’s footer.php in your child-theme directory and add the code to the newly copied footer.php (in the child-theme folder).
People usually prefer the second way (b) so they don’t have to redo the changes if/when they update their theme.
The problem is unless I see your page’s HTML and classes, I cannot say which selector to add in the js script. It’s not possible to provide a js code without visiting your page/site and seeing the markup, classes and id attributes of your theme’s mobile menu.
You’ll need to find your mobile menu selector and set it in the js code like this:
$(document).on("click","mobile-menu-selector-here .menu-item .__mPS2id",function(){and you need to find your mobile menu close button selector and set it in the js code like this:
$("mobile-menu-close-button-selector-here").trigger("click");Hi, After searching for half a day, I stumbled on this page. First of all, brilliant plugin!
But like many others the mobile hamburger menu does not dissappear after clicking on a …#link
Would appreciate if you can help me out!
Cheers, Eddie
Hi,
Try this script:
<script> (function($){ $(window).on("load",function(){ $(document).on("click","#prk_menu_els .menu-item .__mPS2id",function(){ $("#prk_menu_left_trigger").trigger("click"); }); }); })(jQuery); </script>Thank you for your comments 🙂
Thanks so much. I did have to look trough previous posts where to put this. I have a Javascript option provided in the template which did not work. So I read is should be in footer.php and then it worked like expected!
Cheers!
You’re welcome 🙂
Hi there, it’s so awesome that you’re helping everyone out. I have tried myself but with my limited Javascript knowledge I just can’t come right.
My website that I’m trying on is:
https://africaaviationacademy.co.za/africa-aviation-academy-home-page/
Regards
Hi,
I provide free support only for “Page scroll to id” plugin users. You can make small donation if you want me to help you regardless (i.e. without using the plugin). You can contact me here if you want.
Hi could you help me as well with the script?
Thank you!
hacienda.cristitinca.ro
Sure, try this:
<script> (function($){ $(window).on("load",function(){ $(document).on("click",".nd_options_navigation_4_sidebar_content .menu-item .__mPS2id",function(){ $(".nd_options_close_navigation_4_sidebar_content").trigger("click"); }); }); })(jQuery); </script>Thank you, it worked!
You’re welcome! Glad I helped 🙂
Hi there,
My website is formstechnology.gr.
Could you please provide me the correct script ?
Best regards
Γεια χαρά,
This script is for sites/pages using “Page scroll to id” plugin and I provide free support for the plugin.
If you want me to help with your site regardless of using the plugin or not, you can contact me using the link below and I’ll give you a quote (e.g. if you just want to close the mobile menu a small donation would be ok):
http://manos.malihu.gr/contact