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 befole 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 😉
Hello,
Luckily I came across your site, since it exactly describes my problem. I would really want to have the mobile and tablet navigation menu to close on click, because it is a one-pager with page scroll to id.
I would really appreciate if you have time to provide me the correct javascript coding in order to do so. I have the page scroll to id plugin installed.
Thank you in advance.
Hi,
Try the following script:
<script> (function($){ $(window).on("load",function(){ $(document).on("click","#mobile-menu .menu-item ._mPS2id-h",function(){ $(".mobile-sticky-header-overlay.active").trigger("click"); }); }); })(jQuery); </script>Let me know if it works 🙂
Thank you a lot, it works perfectly.
Have a nice day!
I’m so lucky to happen upon your site. I just created scroll to id tag for my “Support” menu on iamamaker.org and of course having an issue with the menu closing on mobile. Any help is appreciated! Thank you!
No problem 🙂 Try this script:
<script> (function($){ $(window).on("load",function(){ $(document).on("click","#main-nav-clone .menu-item ._mPS2id-h",function(){ $("#top-primary-nav a.showhide").trigger("click"); }); }); })(jQuery); </script>Also, in plugin settings, enable “Verify target position and readjust scrolling (if necessary), after scrolling animation is complete” option.
Let me know
Thanks for the template. It works like a charm!
Here is the snippet for the “Responsive Menu” plugin in case someone needs it.
https://wordpress.org/plugins/responsive-menu/
<script> (function($){ $(window).on("load",function(){ $(document).on("click",".rmp-menu-item-link",function(){ $(".rmp_menu_trigger.is-active").trigger("click"); }); }); })(jQuery); </script>Great! Thanks for posting this 🙂
Hi! I’d need some help on the exact javascript to insert to close the menu when clicking on an anchor link.
Here’s the page I need help with: hic.iamluvi.com
Thanks a lot!
Sure. Try this script:
<script> (function($){ $(window).on("load",function(){ $(document).on("click","#nv-primary-navigation-sidebar .menu-item ._mPS2id-h",function(){ $("button.navbar-toggle.active").trigger("click"); }); }); })(jQuery); </script>Let me know if it works
It worked, thank you a lot!
Hi, can you help me with my site? I’m unable to find a mobile selector to get it to work.
I have sorted it out. Thanks for your tutorial. It was a lifesaver.
You’re welcome 🙂
If you need more help let me know.
Hi Manos, If you could help me collapse my mobile menu so your fantastic plugin works on the phone too I would be so grateful. Thank you!
Sure but I need to see your site/page in order to help. Let me know 🙂
Thanks Manos! It’s just a test site and I didn’t really want to publish it before it’s up and running. It’s the same as the domain of my email address. Can you read that? Thanks again!
No problem.
You could use the following script:
<script> (function($){ $(window).on("load",function(){ $(document).on("click","#site-navigation.toggled-on .menu-item ._mPS2id-h",function(){ $("#site-navigation.toggled-on .menu-toggle").trigger("click"); }); }); })(jQuery); </script>Also, instead of using the
page1,page2,page3etc. in your links, you could use the pre-existing ids that wrap your sections content. These pre-existing ids are:post-8panel1panel2panel3panel4If you use the above targets, you should remove the
.panel-imagevalue you set in “Offset” option in plugin settings.Hope this helps
This is wonderful! You’ve helped make my site so much better – thank you!
Glad I helped 🙂
It most certainly has! I’ve sent a small donation to say thanks.
Got it 🙂 Thanks a lot Matthew!
You are welcome!
Hi, could you send me the code to automatically close the menu when scrolling to an ID?
Hello,
You don’t seem to be using “Page scroll to id” plugin. I offer free support for the plugin only.
If you want me to help you without using the plugin, please send me an email and I’ll give you a quote (probably a small donation).
Hi Mate,
I made an attempt to code the JS myself using your template above, but I just can’t get it to work on this site, can you give me a hand? What I have at the moment is;
(function($){
$(window).on(“load”,function(){
$(document).on(“click”,”.main-menu-modal .menu-item ._mPS2id-h”,function(){
$(“.close-main-nav-toggle”).trigger(“click”);
});
});
})(jQuery);
Much appreciated 🙂
Hi,
The script you added seems to work for me (it closes the menu). Does it conflict with something else?
I can’t see any confiliction, honestly I can’t even see if it’s being called… I’ve tried sticking it in as a seperate js file, and now have it tagged onto the end of footer.php.
Can you take a look and see if you can tell the issue?
Thanks very much,
Jon
Scratch that, I just needed to purge the WP cache XD
Thanks bud.
Can you give me the code for this page?
https://beta.bzg.li/
Hi,
This page (and the free support) is for “Page scroll to id” plugin, which you don’t seem to use in your site(?)
I had it installed, but I tried different things. Can you look over it?
https://beta.bzg.li/
If it works I will spend some money 🙂
I just checked it and the mobile menu seems to be already closing when clicking the links.
But why is it going way to far? :/
This functionality is part of your theme and/or Elementor page builder. When “Page scroll to id” is not installed, it seems to be scrolling to the correct place, right?
If you want to use it with “Page scroll to id”, you’ll probably have to manually edit some scripts (you’ll need to activate the plugin in order to see what can be done).
Hi!
Sorry to bother you. I don’t know if it’s exactly this topic, as I can close the menu by clicking anywhere, but it scrolls to the top again.
I’ve tried checking the options you said in other comments (Append the clicked link’s hash value… and Prevent other scripts from handling plugin’s links), but it doesn’t seem to work.
Also, all the submenus stay highlighted instead of the selected one only, I don’t know if you know how to fix it, otherwise nevermind.
Thank youuu!!
Hello,
These issues you’re having come from your theme (the highlighted submenus is not really an issue).
About submenu links staying highlighted:
It’s common for themes to highlight current page menu items and that’s exactly what your theme does. To revert this, simply add the following to your additional CSS in customizer or to your stylesheet:
.sf-menu > li li.current_page_item > a._mPS2id-h:not(.mPS2id-highlight):not(:hover), .sf-menu > li li.current-menu-item > a._mPS2id-h:not(.mPS2id-highlight):not(:hover), .sf-menu > li li.current_page_ancestor > a._mPS2id-h:not(.mPS2id-highlight):not(:hover), .sf-menu > li li.current-menu-ancestor > a._mPS2id-h:not(.mPS2id-highlight):not(:hover), .sf-menu > li li.current-menu-parent > a._mPS2id-h:not(.mPS2id-highlight):not(:hover){ color: #020202; }About the page scrolling to the top after closing the mobile menu:
Sometimes theme developers neglect the idea that some links might point inside the same page and it seems that this is the case with your theme.
The menu is coded in such way, that when it closes, it moves focus to the hamburger menu icon, which is at the top of the page, thus making the page scroll to the focused item, i.e. to the top.
The script that does this is this:
...themes/amphibious/js/custom.jsThe only way to fix this is to manually edit this script file and modify the code.
If you can do this, edit custom.js and find the lines 185-187 (commented as “Bring focus to menu control”) and change the code from:
setTimeout( function() { $( '.toggle-menu-control' ).focus(); }, 300 );to:
/* setTimeout( function() { $( '.toggle-menu-control' ).focus(); }, 300 ); */Save the file and test your page.
It works, thank you very much!!!
Hi, I want to hide the mobile menu (which is actually the same in dekstop) when clicking the links that take you to different parts of the page using your plugin.
Thanks a lot in advance!
Hi,
Try this:
<script> (function($){ $(window).on("load",function(){ $(document).on("click",".main-nav .menu-item ._mPS2id-h",function(){ $("#menu-icon-close").trigger("click"); }); }); })(jQuery); </script>Let me know
Hey thanks for your fast response.
It doesn’t seem to work.
However I used a plugin called TC Custom JavaScript, that lets me add JS to the Appearance tab on WordPress.
I pasted it there, but the menu is still visible after i click the links in it.
I haven’t put JS to my site before, so I’m not sure if it works like that. Let me know if its mandatory to use a child theme.
Here is a screenshot also:
https://scontent.fath5-1.fna.fbcdn.net/v/t1.15752-9/107087187_580094116215325_4973900729336071212_n.png?_nc_cat=108&_nc_sid=b96e70&_nc_oc=AQmxR-byvr4Ccqh3BklT4QLNT-29gTgLoPLim3sJVwQUuuv-zqV5dUK738KWr2wwwjM&_nc_ht=scontent.fath5-1.fna&oh=6b6822aeaf5d5dc364542213d759ec6f&oe=5F24EB3C
Thanks again!
*UPDATE*
Your code works!
I used Simple JS Paste plugin instead.
Thanks very much! Awesome work.
Awesome! Glad I helped 🙂
Menu Not Closing and not scrolling properly. Please help me.
Your theme scrolls to the top every time you close the mobile menu. This can’t be fixed with the plugin but maybe the following could work:
Go to “Page scroll to id” settings and enable “Append the clicked link’s hash value to browser’s URL/address bar” option. Save changes and test your page.
Please help me. I clicked that option also but it didn’t work. Please help me to solve this issue.
Did you solve the issue? Seems to be working for me now.
You need to remove the
wwwpart from your links URL because your web-server doesn’t use it and redirects all requests.You also have an js console error which might prevent scripts from running (not sure where the error comes from).
I’m trying to use the code above by changing the variables, but it doesn’t work … Do I have to insert it after the end of the tag? Would you help me? I’m not quite sure how it works
(function($){
$(window).on(“load”,function(){
$(document).on(“click”,”.menu .mobile_switch_on .show_sub_menu .menu-item ._mPS2id-h”,function(){
$(“.mobile-hamburger-toggle .is-active”).trigger(“click”);
});
});
})(jQuery);
You need to change your code because your close button uses the touchstart event (not click) and you also set your css selector wrong (it doesn’t need spaces between the classes as it’s the same element):
(function($){ $(window).on("load",function(){ $(document).on("click",".menu.mobile_switch_on.show_sub_menu .menu-item ._mPS2id-h",function(){ $(".mobile-hamburger-toggle.is-active").trigger("touchstart"); }); }); })(jQuery);This should work
Unfortunately it didn’t work, did you mention that I also have to do something in my CSS? Could you explain it better?
No, you don’t have to add any CSS.
The script does work, you just need to test it by loading your page on smaller screen/viewport.
I think that you loaded the page on desktop and then emulated the device toolbar to see the mobile menu but this won’t work because your theme loads a different event depending on the width of the viewport the moment the page was loaded.
If you load your page on a smaller viewport, you’ll see that it works.
In any case, if you want to test it from any viewport, you can change the script to include the click event:
(function($){ $(window).on("load",function(){ $(document).on("click",".menu.mobile_switch_on.show_sub_menu .menu-item ._mPS2id-h",function(){ $(".mobile-hamburger-toggle.is-active").trigger("touchstart").trigger("click"); }); }); })(jQuery);although triggering both touchstart and click events is just for testing, because a mobile user will always load the page on a mobile/smaller viewport (you can leave it as it is though if you want… doesn’t really matter).
Hope this makes sense 🙂
Hi, thanks for your awesome plugin!
However, I don’t know anything about Php and your code doesn’t work. I hope you can help me!
Thank you
Hello,
Each site needs its own code. Change the code you added to this:
(function($){ $(window).on("load",function(){ $(document).on("click",".main-navigation.toggled-on .menu-item ._mPS2id-h",function(){ $(".main-navigation.toggled-on .menu-toggle").trigger("click"); }); }); })(jQuery);Also, go to “Page scroll to id” settings and change the “Offset” from the 100 value you entered to:
.navigation-topSave changes and test your page.
Thank you very much! It worked!
https://staging-hotelmillwright.kinsta.cloud/rooms/ we’re using the7 theme, I can’t quite get it to work for closing the mobile menu, Code I have so far:
(function($){
$(window).on(“load”,function(){
$(document).on(“click”,”.dt-mobile-header”,function(){
$(“.dt-close-mobile-menu-icon”).trigger(“click”);
});
});
})(jQuery);
You don’t have “Page scroll to id” plugin activated in your site. This post/tutorial is about using “Page scroll to id” plugin.
Apologies, I deactivated it yesterday for my client to review. I have it activated now.
No problem. Try this script:
<script> (function($){ $(window).on("load",function(){ $(document).on("click","#mobile-menu .menu-item ._mPS2id-h",function(){ $(".dt-close-mobile-menu-icon > span").trigger("click"); }); }); })(jQuery); </script>Thank you! That worked 🙂 I applaud your excellent support and plugin!!
Please provide me advice on how I can collapse the mobile menu after clicking on anchor links. Thank you!
Try this code:
<script> (function($){ $(window).on("load",function(){ $(document).on("click",".offcanvas-sidebar .menu-item ._mPS2id-h",function(){ $(".site-overlay").trigger("click"); }); }); })(jQuery); </script>Very sorry to bother you again and thank you for your help.
I updated my theme and the code stopped working on mobile (still works on small-width desktop).
(function($){
$(window).on(“load”,function(){
$(document).on(“click”,”#menu-default-menu .menu-item ._mPS2id-h”,function(){
$(“.site-overlay”).trigger(“click”).trigger(“touchstart”);
});
});
})(jQuery);
I tried changing to the above and it still doesn’t work on mobile (but works on small-width desktop).
It’s working now – I think it was just cache. Nonetheless thanks you’re a hero!
Awesome! Glad I helped 🙂