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 😉


193 Comments

Post a comment

Comments pages: 1 2

  1. Max
    Posted on February 12, 2022 at 18:35 Permalink

    I need a support – sorry in advance: i’m a rookie…
    Q1. Which one desktop/mobile menu script is the best?
    Q2. How to differ menu style with desktop & mobile?

    Reply
  2. Prashant
    Posted on February 11, 2022 at 10:04 Permalink

    <a href="https://snefra.co.in/talentmine/" rel="nofollow">Home</a><a href="https://snefra.co.in/talentmine/#about-us" rel="nofollow">About Us</a><a href="https://snefra.co.in/talentmine/#why-work-with-us" rel="nofollow">Why Work With Us</a><a href="https://snefra.co.in/talentmine/#services" rel="nofollow">Services</a><a href="https://snefra.co.in/talentmine/#contact-us" rel="nofollow">Contact Us</a><a href="https://snefra.co.in/talentmine/about-us/" rel="nofollow">About Us</a>

    how can we close menu after clicking on anchor menu item…we have onepage website

    Reply
    • malihu
      Posted on February 11, 2022 at 19:02 Permalink

      Hi,

      Try this script:

      <script> (function($){ $(window).on("load",function(){ $(document).on("click",".primary-nav .menu-item .__mPS2id",function(){ $(".mobile-hamburger-toggle.is-active").trigger("touchstart"); }); }); })(jQuery); </script>

      Reply
      • Prashant Jambhale
        Posted on February 16, 2022 at 07:09 Permalink

        Hii malihu, Thanks for your response.
        we have use your given code but still it not working for mobile version, the menu still appear when we click on menu item, it scroll to section but not hiding menu automatically, we still have to close it manually.
        can you please help me on this.
        i have placed th code in footer.php file but still it not working.

        Reply
        • malihu
          Posted on February 16, 2022 at 18:38 Permalink

          Hey,

          You have a type error in the code you added. It seems there’s a line break at .menu-item .__mPS2id. Remove the line break or just copy/paste the script from my comment above.

          Let me know

          Reply
  3. Dawid
    Posted on January 17, 2022 at 17:23 Permalink

    Hello,

    I tried your code but it doesn’t work, i am also not sure if i placed it in right spot, i placed it in footer.php before but and which are below are red, i don’t know if its good or bad. Can you help me?

    Reply
    • malihu
      Posted on January 17, 2022 at 23:05 Permalink

      Hi,

      It seems that your mobile menu needs a slightly different code. Try this:

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

      Yes, place it in your footer.php right above </body> and/or below wp_footer() function.

      Let me know

      Reply
      • Dawid
        Posted on January 17, 2022 at 23:38 Permalink

        Thank you so much, i was struggling with that menu a lot in last days.
        I didn’t know how to make it work from different sites because anchors are only on one site, i finally found option to create different menu on every site. But i got other problem that menu showing all the time and not hiding. And now you are solving it like that. I am not rich but you saved me probably another hours so i sended you small donation.

        Thank you!

        Reply
        • malihu
          Posted on January 18, 2022 at 00:20 Permalink

          Awesome! Thanks a lot for the donation.
          Glad I helped 🙂

          Reply
  4. MrB
    Posted on January 16, 2022 at 14:41 Permalink

    Hey,
    I have the exact same problem and I tried the sample codes you gave but they did not work. I use a cssigniter theme.

    Your help would be highly appreciated.

    Thank you

    Reply
    • MrB
      Posted on January 16, 2022 at 17:41 Permalink

      Right now, only the German version of the site is “working”, or not working. I haven’t yet started to translate.

      Reply
    • malihu
      Posted on January 16, 2022 at 21:24 Permalink

      Hello,

      Try this script:

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

      Let me know if it works

      Reply
      • MrB
        Posted on January 16, 2022 at 22:37 Permalink

        You da man!

        Thank you so much!

        Reply
        • malihu
          Posted on January 16, 2022 at 23:24 Permalink

          You’re welcome 🙂

          Reply
  5. Simon
    Posted on January 14, 2022 at 06:20 Permalink

    Hey there,

    I tried also the code snippets you offered and pasted it into the generics tab under flothemes. Sadly it doesn’t work. Can you help me there?

    Thanks,
    Simon

    Reply
    • malihu
      Posted on January 14, 2022 at 06:42 Permalink

      Hi,

      Try this script:

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

      It should do the trick 😉
      Let me know

      Reply
  6. Goncalo Limas
    Posted on January 5, 2022 at 20:13 Permalink

    Hi malihu, thanks for the plugin.

    I tried several codes and couldn’t make it. Cane you help me out?

    https://eduardorobalo.pt/

    Reply
    • malihu
      Posted on January 5, 2022 at 21:21 Permalink

      Hello,

      Try this:

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

      Let me know 🙂

      Reply
  7. Paul Bryant
    Posted on November 16, 2021 at 01:38 Permalink

    Hello Malihu,

    Would you please help me with making the menu close after selecting a menu item? I’m using the the7 theme and tried the code you provided Tiffany on March 31, 2020 but I can’t seem to get it to work.

    (function($){
    $(window).on(“load”,function(){
    $(document).on(“click”,”#mobile-menu .menu-item ._mPS2id-h”,function(){
    $(“.dt-close-mobile-menu-icon > span”).trigger(“click”);
    });
    });
    })(jQuery);

    Thank you very much,
    Paul

    Reply
    • malihu
      Posted on November 16, 2021 at 15:26 Permalink

      Hello Paul,

      The code you added is almost correct. You just need to skip the span in the close button selector:

      <script> (function($){ $(window).on("load",function(){ $(document).on("click","#mobile-menu .menu-item ._mPS2id-h",function(){ $(".dt-close-mobile-menu-icon").trigger("click"); }); }); })(jQuery); </script>

      Let me know if it works 🙂

      Reply
      • Paul Bryant
        Posted on November 19, 2021 at 02:02 Permalink

        Thank you very much Malihu. That worked. Donation made.

        Thank you again,
        Paul

        Reply
        • malihu
          Posted on November 19, 2021 at 02:24 Permalink

          Awesome 🙂

          Thanks a lot for the donation and support!

          Reply
  8. Desmond
    Posted on October 22, 2021 at 16:56 Permalink

    I’m using the older version of Betheme v17.7 and i am using the Page-Scroll-To-ID plugin yet your solution isn’t working.

    Can you please help??

    Reply
    • malihu
      Posted on October 23, 2021 at 15:21 Permalink

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

      Reply
  9. Rahul Shirode
    Posted on July 22, 2021 at 07:58 Permalink

    Hello Malihu,

    Thanks for the plugin.

    I’m struggling with hiding the mobile off-canvas menu on clicking menu-item. I’m using “Page scroll to id” plugin. my URL is https://nexusventure.in/landing

    Reply
    • Rahul
      Posted on July 22, 2021 at 08:15 Permalink

      (function($){
      $(window).on(“load”,function(){
      $(document).on(“click”,”.menu-item.menu-item-type-custom.menu-item-object-custom.__mPS2id._mPS2id-h”,function(){
      $(“.off-canvas-toggle”).trigger(“click”);
      });
      });
      })(jQuery);

      This isn’t working

      Reply
    • malihu
      Posted on July 22, 2021 at 16:29 Permalink

      Hello,

      Try this:

      (function($){ $(window).on("load",function(){ $(".menu-sliding li a[href*='#']:not([href='#'])").on("click",function(){ $(".sliding-menu .off-canvas-toggle").trigger("click"); }); }); })(jQuery);

      Also, go into plugin settings and enable “Prevent other scripts from handling plugin’s links” option.

      Let me know if it works

      Reply
  10. Gavin
    Posted on July 12, 2021 at 23:00 Permalink

    hey there Malihu,

    Thanks for the plugin, it’s really cool.

    As you may have guessed, I’m struggling with hiding the mobile menu on page scroll click on the menu item Contact Me. I’m using max mega menu plugin, and the URL is https://magnetism.nerv.co.za.

    I have made small donation in the meantime.

    Kind regards,
    Gavin

    Reply
    • malihu
      Posted on July 13, 2021 at 13:08 Permalink

      Hey Gavin,

      Thank a lot for the donation 🙂
      Try the following script and let me know:

      <script> (function($){ $(window).on("load",function(){ $(document).on("click",".mega-menu-wrap .mega-menu-item ._mPS2id-h",function(){ $(".mega-menu-toggle.mega-menu-open").trigger("click"); }); }); })(jQuery); </script>

      Should work well with your menu code.

      Reply
  11. hoangbyn
    Posted on July 8, 2021 at 14:40 Permalink

    here is my site: https://truehope.vn
    can you show me script how to hide this menu when click anchor
    using mobile
    thank you so much

    Reply
    • malihu
      Posted on July 8, 2021 at 15:50 Permalink

      Hello,

      It seems that you’re not using “Page scroll to id” plugin. I provide free support only for plugin’s users.

      If you want me to help you regardless, contact me here and I’ll give you a (small) quote.

      Reply
  12. Giacomo Malaguti
    Posted on May 21, 2021 at 11:20 Permalink

    Ehi Malihu thanks for your plug-in, it works very well!
    Can you help me to close automatically menu in mobile versions?

    Thanks a lot!

    Reply
    • malihu
      Posted on May 21, 2021 at 14:38 Permalink

      Sure. Try this script:

      (function($){ $(window).on("load",function(){ $(document).on("click",".mobile-menu .menu-item ._mPS2id-h",function(){ $(".ts-sidebar-content .close").trigger("click"); }); }); })(jQuery);

      Reply
  13. Frank
    Posted on May 20, 2021 at 15:28 Permalink

    Hi Manos,

    same problem with my mobile menu not closing and your help very much appreciated.

    I love the simple elegance of your plugin and your awesome support here.

    The ?…bypass… cause I am still testing.

    Thanks!

    Reply
    • malihu
      Posted on May 20, 2021 at 17:12 Permalink

      Hello,

      Try this:

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

      Should do the trick 😉

      Reply
      • Frank
        Posted on May 20, 2021 at 18:18 Permalink

        AWESOME Works! εκαρίστο!

        Might be of interest to other users. I use “Elementor” to design my pages and so I just put an HTML Element in the footer and entered your Javascript code. I did not have to change the footer.php. Works like a charm.

        Greetings, stay healthy!

        Reply
        • Frank
          Posted on May 20, 2021 at 18:32 Permalink

          PS I used the menu from the wordpress plugin “Header, Footer & Block” (before “Header, footer, Elementor” that’s why hfe menu) plugin. Maybe this also helps others.

          Reply
        • malihu
          Posted on May 20, 2021 at 20:05 Permalink

          You’re welcome 🙂
          Thanks a lot for your donation!

          Reply
  14. Janeck Simon
    Posted on May 16, 2021 at 16:51 Permalink

    Hello Malihu,
    i hope you are not tired of answering to this. Can you please help me close the mobile menu on my One Page when jumping to anchor?
    Thanks so much.

    Regards janeck Simon

    Reply
    • malihu
      Posted on May 16, 2021 at 17:55 Permalink

      Hello,

      I’m not tired but I provide free support only for “Page scroll to id” plugin users. You don’t seem to be using the plugin, so I can’t provide such script completely free. Would you mind making a small donation (any amount you can)?

      Reply
  15. Max
    Posted on May 14, 2021 at 19:31 Permalink

    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.

    Reply
    • malihu
      Posted on May 15, 2021 at 16:06 Permalink

      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 🙂

      Reply
      • Max
        Posted on May 15, 2021 at 21:39 Permalink

        Thank you a lot, it works perfectly.

        Have a nice day!

        Reply
  16. karen C
    Posted on April 20, 2021 at 06:38 Permalink

    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!

    Reply
    • malihu
      Posted on April 20, 2021 at 13:16 Permalink

      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

      Reply
  17. John
    Posted on April 11, 2021 at 01:54 Permalink

    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>

    Reply
    • malihu
      Posted on April 11, 2021 at 13:57 Permalink

      Great! Thanks for posting this 🙂

      Reply
  18. Luvi
    Posted on April 10, 2021 at 17:51 Permalink

    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!

    Reply
    • malihu
      Posted on April 10, 2021 at 22:47 Permalink

      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

      Reply
      • Luvi
        Posted on April 15, 2021 at 15:11 Permalink

        It worked, thank you a lot!

        Reply
  19. Earid
    Posted on March 11, 2021 at 14:24 Permalink

    Hi, can you help me with my site? I’m unable to find a mobile selector to get it to work.

    Reply
    • Earid
      Posted on March 11, 2021 at 14:31 Permalink

      I have sorted it out. Thanks for your tutorial. It was a lifesaver.

      Reply
      • malihu
        Posted on March 11, 2021 at 18:16 Permalink

        You’re welcome 🙂

        If you need more help let me know.

        Reply
  20. Matthew
    Posted on February 23, 2021 at 17:52 Permalink

    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!

    Reply
    • malihu
      Posted on February 23, 2021 at 18:18 Permalink

      Sure but I need to see your site/page in order to help. Let me know 🙂

      Reply
      • Matthew
        Posted on February 23, 2021 at 19:02 Permalink

        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!

        Reply
        • malihu
          Posted on February 23, 2021 at 23:00 Permalink

          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, page3 etc. in your links, you could use the pre-existing ids that wrap your sections content. These pre-existing ids are:

          post-8
          panel1
          panel2
          panel3
          panel4

          If you use the above targets, you should remove the .panel-image value you set in “Offset” option in plugin settings.

          Hope this helps

          Reply
          • Matthew
            Posted on February 23, 2021 at 23:20 Permalink

            This is wonderful! You’ve helped make my site so much better – thank you!

        • malihu
          Posted on February 24, 2021 at 01:26 Permalink

          Glad I helped 🙂

          Reply
          • Matthew
            Posted on February 24, 2021 at 09:21 Permalink

            It most certainly has! I’ve sent a small donation to say thanks.

        • malihu
          Posted on February 24, 2021 at 18:10 Permalink

          Got it 🙂 Thanks a lot Matthew!

          Reply
          • Matthew
            Posted on February 24, 2021 at 18:26 Permalink

            You are welcome!

  21. [email protected]
    Posted on February 11, 2021 at 19:16 Permalink

    Hi, could you send me the code to automatically close the menu when scrolling to an ID?

    Reply
    • malihu
      Posted on February 12, 2021 at 00:54 Permalink

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

      Reply
  22. Jon
    Posted on November 9, 2020 at 12:04 Permalink

    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 🙂

    Reply
    • malihu
      Posted on November 9, 2020 at 15:51 Permalink

      Hi,

      The script you added seems to work for me (it closes the menu). Does it conflict with something else?

      Reply
      • Jon
        Posted on November 9, 2020 at 17:06 Permalink

        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

        Reply
        • Jon
          Posted on November 9, 2020 at 17:11 Permalink

          Scratch that, I just needed to purge the WP cache XD

          Thanks bud.

          Reply
  23. Maximilian
    Posted on September 22, 2020 at 10:59 Permalink

    Can you give me the code for this page?
    https://beta.bzg.li/

    Reply
    • malihu
      Posted on September 22, 2020 at 20:06 Permalink

      Hi,

      This page (and the free support) is for “Page scroll to id” plugin, which you don’t seem to use in your site(?)

      Reply
      • Maximilian
        Posted on September 23, 2020 at 10:18 Permalink

        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 🙂

        Reply
        • malihu
          Posted on September 24, 2020 at 04:17 Permalink

          I just checked it and the mobile menu seems to be already closing when clicking the links.

          Reply
          • Maximilian
            Posted on September 24, 2020 at 09:59 Permalink

            But why is it going way to far? :/

        • malihu
          Posted on September 24, 2020 at 18:22 Permalink

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

          Reply
  24. 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
    • malihu
      Posted on September 20, 2020 at 17:18 Permalink

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

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

      Reply
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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!!

  30. 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 🙂

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