Close Mobile Menu after selecting Menu Item Help

[freedomdesign]

Hello,

Could I get some help with my menu closing after a menu Item is clicked for mobile and tablet?
I am using the Inline Navigation Menu. Preferably if it could close when anything in the menu is clicked that would be great.

The Header Bar I want disappearing is labeled ID #foo

Here is the Javascript being used to toggle the visibility of #foo from the Hamburger

HTML for Hamburger:
<div class="nav-button" id="nav-toggle" href="#" onclick="toggle_visibility('foo');"><span></span></div>

JS:

  function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

document.querySelector( "#nav-toggle" ).addEventListener( "click", function() {
  this.classList.toggle( "active" );
});

So I need it whenever a menu Item (li, a, span) inside of the main header is clicked, it closes my other header Container/Bar “#foo” that displays underneath. So if theres a way that can put #foo back to display:none; on a main header menu click, that would be amazing.

Any help would be appreciated,
Thanks!

[rad]

Hi @freedomdesign,

Thanks for reaching out.

This javascript should do it,

jQuery('.e53-19.x-bar, .e53-19.x-bar a .x-anchor-text-primary').on('click touchend', function() {

jQuery ('#nav-toggle').trigger('click');

} );

instead of this

document.querySelector( "#nav-toggle" ).addEventListener( "click", function() {
this.classList.toggle( "active" );
});

But there is a problem, because of this code, it doesn’t toggle correctly

function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}

Please change it similar to this https://api.jquery.com/toggle/. We don’t provide customization here in the forum, what was provided should only serve as the idea on how to achieve it and we can’t provide support or maintain custom codes.

Thanks!

[freedomdesign]

Hey @Rad

Thank you so much for this help, I was manage to get it working with the code you provided + a few tweaks!

You are a lifesaver. Have a great day!

Thanks again!

[ruenel]

You’re welcome!
We’re glad @Rad were able to help you out.