Hamburger menu 'close on click'

Hey guys, did a quick search but could not find an answer. Is it possible to add some code (Javascript?) to have the expanded hamburger menu collapse/close on click? And if so, what is it? :slight_smile:

I’m asking because I’d like the menu bar to remain sticky on mobile devices, but this is very user-unfriendly without the menu closing automatically (it occludes the content). By the way, I’m using a beaver builder row + menu module as main navigation bar. The navigation from my theme (Dynamik Website Builder) is hidden. Here’s my website if you’re curious: armadamoves.nl. Thanks!

  • Kevin

Hey Kevin,

Welcome to BB forums! :slight_smile: So you wanted the menu bar to remain sticky on mobile devices. Unfortunately, our theme can’t do that. Sorry, we don’t provide custom scripting as it is out of scope of what we can offer here in the forums, however you might want to try some of these plugins.

  1. https://wordpress.org/plugins/sticky-header/

  2. https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/

Thanks!

KC

Hey KC, thanks for your reply. But that’s not what I meant. I purposefully ‘unstickied’ the menu on mobile devices, because the expanded hamburger menu remains open when clicked. This is problematic on a one-page scroller (such as mine), as it covers up the content to which it scrolls. So it would be nice if the expanded hamburger menu would automatically collapse when a link is clicked. And to reiterate, I’m using a BB-menu module (and some very simple Javascript to have it stickied).

Also, you’re talking about our ‘theme’ but I’m only using the BB-plugin (not the theme). I understand if this is beyond the scope of your service, but I replied just to clear things up. Cheers!

If you’re familiar with JS, have a look at line 161 - 163 in bb-theme/js/theme.js. Looks like all you need to do is create a function does this when a menu item is clicked:

  • replaces 'in' with 'collapse' on '.fl-page-nav .fl-page-nav-collapse'
  • remove 'fl-mobile-sub-menu-open' on '.fl-page-nav .fl-page-nav-collapse ul li'

Hey Kevin,

You could probably try the jQuery snippet below and see if it works for you.

jQuery(document).ready(function() {
  jQuery('.fl-module-menu li').click(function() {
    jQuery(this).parent().fadeOut();
  });
});

Ben

Works beautiful Ben. You’re the man, thanks a lot! :slight_smile:

Awesome! Have fun with BB! :slight_smile:

Ben