Streaming live at 10am (PST)

Menu doesn't close after clicking link

#1

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.

Nav isn't closing after click? Hmmm
#2

You’re not doing anything wrong. The navbar element won’t close unless one of the following happens.

  • User clicks outside of navbar
  • User clicks the navbar menu icon
  • Page is reloaded

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.

#3

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.

#4

:thinking: Maybe it could be that it is a side menu or the fixed position is overriding something.

#5

Perhaps. Perhaps. I’d rather keep the menu on the right if possible. Maybe Webflow staff has some more insight?

#6

Only possible with custom 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

3 Likes
#7

Fantastic, seems to be working like a charm! Thank you so much @samliew !

#8

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

– Read-Only Link to RossCYoga.webflow.io

(how to access public share link)

#9

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 !

#10

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

@steven.riot I placed this code in the ‘Footer Code’ section the project settings.

1 Like