Menu doesn't close after clicking link

This will first check the device width before performing Samliew’s code to get around the desktop issue:

<script>
$('.w-nav-menu').on('click', 'a', function() {

  // When a nav item is clicked on a tablet or mobile device

    if (parseInt($(window).width()) < 990) {

	// Click the menu close button

        $('.w-nav-button').triggerHandler('tap');

    }

});
</script>
6 Likes

I used this code to toggle a burger menu button when clicked in-page link, but it doesn’t work. Can you give any advise please?

I think the menu is on a fixed position

Hello guys !
Yuo can see my solution without code on my Site in component “header”.

It wery easy. I duplicate button "close/ open " mobile menu them i put link in this buttom. Important : this button and oblect inner hide on desktop.

This worked like a charm. Thanks so much!

This is fantastic, works perfectly. Cheers!

I am trying this code and it is not working. Do I need to change the value for .w-nav-menu and if so where would I find that value on my site?

Not sure if this is why for you but if you use code to make the nav menu close you can’t see it in effect in preview mode. It only shows once the site is published.

Hey can you explain how to do this? I can only seem to find animations to make my nav links wiggle and bounce etc.

Thank you! Working perfectly!

Hi! Thanks to the code posted by @alexdixon I could solve the closing issue of my menu…but I have an issue with this page HowToMoney

Only on this page (project HowToMoney) on mobile I have a problem with the width of the screen as soon as you click on the hamburger menu. On the other 2 pages (2 other projects: Work and St.Pauli Turnverein) this problem does not occur.

Here is a screen record of the issue: RPReplay_Final1665490768.MP4 - Google Drive

Here is the read-only link of the project: Webflow - Elmira's Portfolio

Can anyone help please? :woozy_face: :pray:

1 Like

I’ve been looking for this all day. Thanks so much!!! Works perfectly!!!

@alexdixon Thank you very much !

2 Likes

@alexdixon Thank you!!

Thanks! It works for my but I have another problem.
One of the menu options didn’t close de drop down

You can see the behavior here https://share.vidyard.com/watch/JDrNt6xAJ4KTdybxWEXziT?

Only happens in the home, with the contact link.

I put #contact and not /#contact because I have this idea in a footer component that my subpages uses.

Any idea ?

Worked perfectly, thank you!

1 Like

Hello, Juannito. I your case, try making the contact as a navbar-button class. And then:

<script>
$('.w-nav-menu').on('click', 'a[class^=navbar-link]', function() {
  $('.w-nav-button.w--open').triggerHandler('tap');
});
</script>

can’t believe this is still an issue. and to add code you need paid site. sound sneaky to me. retractable menu should be by default. period. it should also me an option in the style section

Hello,

Unfortunately, this did not solve the problem for me.

I have created another forum post below. Can you please take a look why it is not working for me?

https://discourse.webflow.com/t/mobile-menu-wont-close-after-clicking-internal-link/256010?u=kinderwunschhannover