This website uses cookies to personalise ads and to analyse traffic ok
web design

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:

        $(document).on("click","#mobile-menu-selector .menu-item ._mPS2id-h",function(){

Can I get support if I don’t use “Page scroll to id” in my site?

You can make a donation and request support 😉


Post a comment
  1. Xuan Yee
    Posted on March 7, 2020 at 13:19 Permalink

    Please provide me advice on how I can collapse the mobile menu after clicking on anchor links. Thank you!

    • malihu
      Posted on March 7, 2020 at 15:37 Permalink

      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>


Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>