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 😉


159 Comments

Post a comment

Comments pages: 1 2

  1. Hannah
    Posted on November 10, 2022 at 10:47 Permalink

    Would anyone be able to adjust the code to suit my website? I have a page anchor on the home page for ‘Functions & events’ but the overlay menu stays ontop if on the homepage already.

    Thank you!

    Reply
  2. Konstantin
    Posted on November 8, 2022 at 21:22 Permalink

    Hello! Could you please help with the code for my site?

    Reply
  3. Dagmar
    Posted on October 10, 2022 at 12:57 Permalink

    Kaliméra Manos,

    I thought I could adapt your script by myself, but failed. Could you please provide support for https://www.innersource.at
    🙏🏼

    Reply
  4. Tobias
    Posted on August 16, 2022 at 18:39 Permalink

    Hi malihu,

    could you help me please for my website: kinderwalderlebnis.de

    I have also the problem with the mobile menu when using Page scroll to id plugin.

    best regards
    Tobias

    Reply
    • malihu
      Posted on August 17, 2022 at 18:43 Permalink

      Hello Tobias,

      This should do the trick:

      <script> (function($){ $(window).on("load",function(){ $(document).on("click",".mobile-header-item .menu-item .__mPS2id",function(){ $(".mobile-menu-close")[0].click(); }); }); })(jQuery); </script>

      Let me know if it worked

      Reply
      • Tobias
        Posted on August 17, 2022 at 22:13 Permalink

        Dear malihu,

        thank you very much, it works.
        all the best
        Tobias

        Reply
        • malihu
          Posted on August 17, 2022 at 22:20 Permalink

          You’re welcome 🙂

          Reply
  5. Marthijn
    Posted on July 20, 2022 at 16:47 Permalink

    Hi,

    I tried to replace your code with the right declarations but cnn’t find to good ones.
    Can you provide me with the working code for https://arjennedaams.nl.

    Many thanks in advance.

    Reply
    • malihu
      Posted on July 20, 2022 at 17:08 Permalink

      Sure.

      Because of the way your menu works, it needs an extra condition to trigger the click event (which is not triggered via jQuery by the way):

      (function($){ $(window).on("load",function(){ $(document).on("click","#site-navigation .menu-item .__mPS2id",function(){ if($("h3.menu-toggle").is(":visible")) $("h3.menu-toggle")[0].click(); }); }); })(jQuery);

      In the code above we basically make sure that the hamburger menu icon is visible before we trigger the close menu, otherwise it interferes with the desktop menu version. We also trigger a pure js click event (instead of jQuery) because that’s the event your mobile menu uses.

      Let me know 🙂

      Reply
      • Marthijn
        Posted on July 21, 2022 at 16:43 Permalink

        Thanks for your quick response. It works perfect now!

        One other question.
        I set the offset on “.site-header”. Works perfect on desktop, but on mobile there is still some space. Is it possible to make different declarations for desktop and mobile?

        Reply
        • malihu
          Posted on July 21, 2022 at 17:42 Permalink

          Since your site’s header is not sticky/fixed, it’s better to use plugin’s :fixed offset selector expression. So, in plugin settings, change the “Offset” option value to:

          .site-header:fixed

          Save changes, test and let me know if it works as you want it.

          Reply
          • Marthijn
            Posted on July 21, 2022 at 20:16 Permalink

            Unfortunately it doesn’t work.
            Maybe it’s because the “#masthead” is already fixed?

            I also tried it with #masthead:fixed” but that doesn’t do the trick too

        • malihu
          Posted on July 21, 2022 at 22:04 Permalink

          I checked your page and the option is still .site-header. Did you changed it to .site-header:fixed? Maybe you need to clear/flush cache?

          Reply
          • Marrhijn
            Posted on July 21, 2022 at 22:49 Permalink

            It stille doesn’t work 🙁
            I cleared the cache en checked in several browsers, but no result. I think I (have to) be satisfied with the current situation. Which isn’t really that bad either.

            I made a small donation for your help.

        • malihu
          Posted on July 21, 2022 at 23:23 Permalink

          Thanks a lot for your donation 🙂

          The updated “Offset” option value is still not applied on the front-end.

          Leave the “Offset” option value to .site-header:fixed and check again tomorrow. Maybe there’s some server cache that needs to be flushed(?). Do you have a caching plugin or CDN service on your site?

          Alternatively, we could use the following way to change the offset value programmatically:

          http://manos.malihu.gr/page-scroll-to-id-for-wordpress/2/#faq-24

          Let me know if you wanna try it.

          Reply
  6. Emanuel
    Posted on June 30, 2022 at 12:35 Permalink

    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?

    Reply
    • Emanuel
      Posted on June 30, 2022 at 12:38 Permalink

      “I tried to erase the “script” but does not works”

      Reply
    • malihu
      Posted on June 30, 2022 at 15:37 Permalink

      Hello,

      Please post your site/page URL so I can check it and help.

      Reply
      • Emanuel
        Posted on July 2, 2022 at 08:59 Permalink

        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?

        Reply
        • Emanuel
          Posted on July 2, 2022 at 09:14 Permalink

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

          Reply
          • Emanuel
            Posted on July 2, 2022 at 09:17 Permalink

            <script> (function($){ $(window).on("load",function(){ $(document).on("click","#prk_menu_els .menu-item .__mPS2id",function(){ $("#prk_menu_left_trigger").trigger("click"); }); }); })(jQuery); </script>

        • malihu
          Posted on July 2, 2022 at 13:50 Permalink

          You can send send it to me privately via email here:

          https://manos.malihu.gr/contact

          Can you do this?

          Reply
          • Emanuel
            Posted on July 3, 2022 at 09:06 Permalink

            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.

        • malihu
          Posted on July 3, 2022 at 14:16 Permalink

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

          Reply
          • Emanuel
            Posted on July 4, 2022 at 09:33 Permalink

            Doesn’t works unfortunately. Do you think that if write the code in css would work?

          • Emanuel
            Posted on July 4, 2022 at 10:16 Permalink

            Or is there other place to put the script? That certainly will work

        • malihu
          Posted on July 4, 2022 at 16:05 Permalink

          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.php template (via ftp or the theme editor) and place the script (with the <script> tags) below the line with the wp_footer() function and before the closing body tag (</body>).

          Save the file and test.

          Reply
          • Emanuel
            Posted on July 5, 2022 at 10:00 Permalink

            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.

          • Emanuel
            Posted on July 5, 2022 at 10:22 Permalink

            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.

        • malihu
          Posted on July 5, 2022 at 16:26 Permalink

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

          Reply
          • Emanuel
            Posted on July 8, 2022 at 11:11 Permalink

            Well, the “a” option I’ve already did and doesn’t works, I put the code exactly before the body tag.

            The “b” option, I don’t know, because on child theme there is almost nothing, just have the “functions.php” and “styles.css”, and on them are practically blank, have just few lines of code, and on “functions.php” is almost empty.

            I didn’t find the mobile menu selector code, do you know in wich file is it? Because I didn’t find a file named “menu…js/php”

          • Emanuel
            Posted on July 8, 2022 at 11:37 Permalink

            In wich file is to paste the footer.php on child theme, functions.php? But I erase everithing there or I just paste after of what’s there, or before?

            The almost empty is the style.css file, on functions.php there is a few lines saying something about directory

        • malihu
          Posted on July 8, 2022 at 17:32 Permalink

          If you added the js code in your theme’s footer.php (a) and it doesn’t work, it’s because you need to change the selector(s) in the script to match your mobile menu.

          In order to find the selector(s) you need to open your page with browser’s developer tools and see the id and classes it has. But this is not something you can do if you don’t have some experience with web development.

          In short, the script provided in this post is not a global solution that works everywhere. That’s why I first visit the site and then provide the code to the user to add it.

          Is the mobile menu part of your theme or another plugin? Which theme are you using?

          Reply
          • Emanuel
            Posted on July 9, 2022 at 11:37 Permalink

            I use the beaver builder theme (child-theme) and beaver builder plugin, but my menu is from the beaver builder plugin, not from theme.

            When you click on create a page (using beaver plugin), there is a + at the top right, and when you click appear many “options” (modules) and my menu is on the first page, (Modules/standard modules/actions/menu).

            The config that I put on responsive menu is:
            Responsive Toggle: Hamburger Icon,
            Responsive Style: Flyout Overlay,
            Flyout Position: Right,
            Responsive Breakpoint: Medium & Small Devices Only,
            Sub-menu Item Icon: None.

        • malihu
          Posted on July 9, 2022 at 17:55 Permalink

          Try changing the script you added to your theme’s footer.php to:

          <script> (function($){ $(window).on("load",function(){ $(document).on("click",".menu-item .__mPS2id",function(){ $(".fl-menu-mobile-close").trigger("click"); }); }); })(jQuery); </script>

          Save and test.

          Reply
          • Emanuel
            Posted on July 11, 2022 at 13:23 Permalink

            Doesn’t works, but
            I found the mobile menu code
            <div class="pp-advanced-menu-mobile-toggle hamburger"> <div class="pp-hamburger" tabindex="0" role="button" aria-label="Menu"><div class="pp-hamburger-box"><div class="pp-hamburger-inner"></div></div></div> </div> <div class="pp-advanced-menu pp-advanced-menu-accordion-collapse off-canvas"><div class="pp-clear"></div> <nav class="pp-menu-nav pp-off-canvas-menu pp-menu-right" aria-label="Menu" itemscope="itemscope" itemtype="https://schema...."> <a href="javascript:void(0)" class="pp-menu-close-btn" aria-label="Close the menu" role="button">×</a> <ul id="menu-menu-1" class="menu pp-advanced-menu-horizontal pp-toggle-none"><li id="menu-item-1" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="#about" data-ps2id-api="true"

            I think it can helps

          • Emanuel
            Posted on July 11, 2022 at 13:33 Permalink

            Where is my comment

        • malihu
          Posted on July 11, 2022 at 15:26 Permalink

          Your comment was falsely held for moderation. I fixed it.

          Try changing the js code to:

          <script> (function($){ $(window).on("load",function(){ $(document).on("click",".menu-item .__mPS2id",function(){ $(".pp-menu-close-btn").trigger("click"); }); }); })(jQuery); </script>

          or

          <script> (function($){ $(window).on("load",function(){ $(document).on("click",".menu-item .__mPS2id",function(){ $(".pp-menu-close-btn")[0].click(); }); }); })(jQuery); </script>

          and see if it works

          Reply
          • Emanuel
            Posted on July 11, 2022 at 20:39 Permalink

            Doesn’t works, I went to customize (theme) and code>footer code and put the code there, and none worked,

            I first put the first, publish and nothing, so I erase, put the other code, and publish again, and nothing too.

          • Emanuel
            Posted on July 13, 2022 at 11:23 Permalink

            What can I do to solve this?

  7. 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
  8. [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
  9. [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
  10. 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