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 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 😉


119 Comments

Post a comment

Comments pages: 1 2

  1. Eddie
    Posted on April 8, 2022 at 15:57 Permalink

    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

    Reply
    • malihu
      Posted on April 8, 2022 at 19:01 Permalink

      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 🙂

      Reply
      • [email protected]
        Posted on April 14, 2022 at 20:32 Permalink

        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!

        Reply
        • malihu
          Posted on April 15, 2022 at 01:55 Permalink

          You’re welcome 🙂

          Reply
  2. [email protected]
    Posted on March 14, 2022 at 16:29 Permalink

    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

    Reply
    • malihu
      Posted on March 15, 2022 at 04:04 Permalink

      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.

      Reply
  3. [email protected]
    Posted on March 3, 2022 at 13:46 Permalink

    Hi could you help me as well with the script?

    Thank you!

    hacienda.cristitinca.ro

    Reply
    • malihu
      Posted on March 3, 2022 at 22:25 Permalink

      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>

      Reply
  4. Paris
    Posted on February 21, 2022 at 00:43 Permalink

    Hi there,

    My website is formstechnology.gr.
    Could you please provide me the correct script ?

    Best regards

    Reply
    • malihu
      Posted on February 21, 2022 at 01:50 Permalink

      Γεια χαρά,

      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

      Reply

Comments pages: 1 2

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>

css.php