Live site: http://urakashi.webflow.io
Guys, I can’t get my menu to automatically close after clicking a menu item (that links to another section on the page).
What am I doing wrong?
Here is my site Read-Only: https://preview.webflow.com/preview/urakashi?preview=e2b524bc23494dbc10fab881d19a8176
Edit: Fixed read-only link.
You’re not doing anything wrong. The navbar element won’t close unless one of the following happens.
Since you’re using section links in the navbar none of those actions take place.
A solution is to add an interaction onto each link in the navbar to move the navmenu element 100% to the right. This way when clicked the page will scroll down to the appropriate section and the navbar menu will close simultaneously.
Thanks for the reply @matthewpmunger !
However, on this page I’ve built before, the menu closes upon clicking/tapping a section link (access) : https://www.pecbar.jp
Could it be a difference between menus that drop down from the top VS from the side?
PS you gotta shrink the window to tablet size for the mobile menu to appear.
Maybe it could be that it is a side menu or the fixed position is overriding something.
Perhaps. Perhaps. I’d rather keep the menu on the right if possible. Maybe Webflow staff has some more insight?
Only possible with custom code. Put this in the Site Footer Code:
<script>
$('.w-nav-menu').on('click', 'a', function() {
$('.w-nav-button').triggerHandler('tap');
});
</script>
Also, feel free to contact me for further code help and/or customization of third-party plugins
Howdy y’all,
Found another less coding workaround to our problem. Honest moment…not quite solved, but definitely an effective mitigation. It still requires a click of the hamburger to close the Nav Menu fully but actually isn’t too annoying using the animations. Enjoy!
Peace ॐ,
RossC
Check out these links for the solution:
Forum post: How to Move/Hide Nav bar and Close Nav Menu Using Built-In Interactions
Where exactly are you suppose to add this code ?
I tried to embed it into my navbar, and into the head code… but i’m obviously doing something wrong since it’s not working.
Link to my site, with the dropdown menu and its anchors : https://preview.webflow.com/preview/seml-integrale?utm_source=seml-integrale&preview=155702df70d89fc87ca8141079c98d74
Thanks !
I propose the following enhanced version of samliew’s code, which prevents the nav bar from breaking in desktop (as opposed to mobile) view (that was my experience, at least).
$('.w-nav-menu').on('click', 'a', function() {
if ($('.w--open').length === 1){ // detect whether menu is open in mobile view
$('.w-nav-button').triggerHandler('tap');
}
});
Thanks, @samliew, for heading me in the right direction! 
@steven.riot I placed this code in the ‘Footer Code’ section the project settings.
Thanks, man. I was having trouble with desktop version and that worked for me.
I’m having the same issue. Pasting code either in the Head or Footer Code section does nothing to the menu unfortunately.
If anyone has any ideas or workarounds this, it would be really helpful.
Thanks,
How is this not fixed four years later?
I’m keen to use webflow, but this seems like a bug that should have been fixed ages ago.
This fix works. 100%. For newbies, just remember to wrap it in the script tags:
Hi Lucian,
I have pasted the Code inclusively the Tag to the Footer field, but nothing happend.
The menu on mobile devices doesn’t close after click on a button. What did I do wrong?
Does someone have an idea?
I only have the capacity to give you my read only link, sorry. I will try to remember to fault find this for you some time next week, but hopefully you can find the issue by reviewing my read only. I did get it to work for me
Okay thanks. At this point it is not going any further right now.
Having the same issue as you - this fix doesn’t work for any of the sites I build!
Thank you!!!
Works properly here!
Hey!
I have the same problem but the code doesn’t work for me. I would like the menu closes after clicking on any nav link. Can you help me with that?
Thanks!
