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:

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

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

You can make a donation and request support 😉


27 Comments

Post a comment
  1. Oneka
    Posted on September 17, 2020 at 16:19 Permalink

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

    Reply
  2. Vasilis
    Posted on July 3, 2020 at 06:25 Permalink

    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!

    Reply
  3. Jigar Chaudhary
    Posted on June 8, 2020 at 22:31 Permalink

    Menu Not Closing and not scrolling properly. Please help me.

    Reply
    • malihu
      Posted on June 9, 2020 at 11:47 Permalink

      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.

      Reply
      • Jigar Chaudhary
        Posted on June 9, 2020 at 19:45 Permalink

        Please help me. I clicked that option also but it didn’t work. Please help me to solve this issue.

        Reply
        • malihu
          Posted on June 11, 2020 at 12:20 Permalink

          Did you solve the issue? Seems to be working for me now.

          You need to remove the www part 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).

          Reply
  4. igor
    Posted on May 28, 2020 at 00:31 Permalink

    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);

    Reply
    • malihu
      Posted on May 28, 2020 at 05:42 Permalink

      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

      Reply
      • Igor
        Posted on May 28, 2020 at 21:24 Permalink

        Unfortunately it didn’t work, did you mention that I also have to do something in my CSS? Could you explain it better?

        Reply
        • malihu
          Posted on May 29, 2020 at 00:23 Permalink

          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 🙂

          Reply
  5. Dominik
    Posted on April 28, 2020 at 16:18 Permalink

    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

    Reply
    • malihu
      Posted on April 30, 2020 at 02:22 Permalink

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

      Save changes and test your page.

      Reply
      • Dominik
        Posted on April 30, 2020 at 11:11 Permalink

        Thank you very much! It worked!

        Reply
  6. Tiffany Ventura
    Posted on March 31, 2020 at 21:37 Permalink

    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);

    Reply
    • malihu
      Posted on April 1, 2020 at 10:51 Permalink

      You don’t have “Page scroll to id” plugin activated in your site. This post/tutorial is about using “Page scroll to id” plugin.

      Reply
      • Tiffany Ventura
        Posted on April 1, 2020 at 18:12 Permalink

        Apologies, I deactivated it yesterday for my client to review. I have it activated now.

        Reply
        • malihu
          Posted on April 2, 2020 at 11:09 Permalink

          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>

          Reply
          • Tiffany Ventura
            Posted on April 2, 2020 at 17:58 Permalink

            Thank you! That worked 🙂 I applaud your excellent support and plugin!!

  7. 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!

    Reply
    • 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>

      Reply
      • Xuan Yee
        Posted on July 18, 2020 at 20:08 Permalink

        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).

        Reply
        • Xuan Yee
          Posted on July 19, 2020 at 02:24 Permalink

          It’s working now – I think it was just cache. Nonetheless thanks you’re a hero!

          Reply
          • malihu
            Posted on July 19, 2020 at 16:18 Permalink

            Awesome! Glad I helped 🙂

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