bootstrap menu not closing when clicking again on menu button
<p>I'm using bootstrap 3 and on a small device, the hamburger icon appears as expected.</p>

<p>If I click on the menu icon, the mobile menu appears. So far so good.</p>

<p>The problem is that I need the menu to collapse back when I click again on the hamburger icon, but that doesn't work.</p>

<p>I also had to include some custom js to close it when clicking on a menu entry as well as on the body.</p>

<p>Here's the code I'm using to display the navbar:</p>

<pre><code>&lt;nav class="navbar navbar-default" role="navigation"&gt;
    &lt;div class="navbar-header"&gt;
        &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false"&gt;
               &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
               &lt;span class="icon-bar"&gt;&lt;/span&gt;
               &lt;span class="icon-bar"&gt;&lt;/span&gt;
               &lt;span class="icon-bar"&gt;&lt;/span&gt;
             &lt;/button&gt;
             &lt;a class="navbar-brand" href="/"&gt;
                &lt;img src="&lt;?php echo get_template_directory_uri() . '/assets/img/logo.png' ?&gt;" alt="&lt;?php bloginfo('description'); ?&gt;" title="&lt;?php bloginfo('name'); ?&gt;"/&gt;
             &lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="navbar-collapse collapse" id="navbar-collapse-1" aria-expanded="false" style="height: 1px;"&gt;
       &lt;?php
          wp_nav_menu(array(
            'menu' =&gt; 'top_menu',
            'header-menu' =&gt; ('Header Menu'),
            'depth' =&gt; 2,
            'container' =&gt; false,
            'menu_class' =&gt; 'nav navbar-nav',
            'walker' =&gt; new wp_bootstrap_navwalker())
          );
       ?&gt;
       &lt;ul class="nav navbar-nav navbar-right"&gt;
        &lt;a href="/booking" class="btn btn-transparent uppercase align-element-center nav-bar hidden-xs"&gt;Test&lt;/a&gt;
       &lt;/ul&gt;
    &lt;/div&gt;
 &lt;/nav&gt;
</code></pre>

<p>and this is the javascript I had to add in order to make it collapse when clicking on the menu entry and/or on the body, as well as an attempt to make it close again when clicking on the hamburger icon if the menu is expanded:</p>

<pre><code>$('.navbar-nav li a').click(function() {
  console.log('clicked');
  $('.navbar-collapse').attr('aria-collapsed', false);
  return $('.navbar-collapse').collapse('hide');
});

$(document).on('click', function() {
  return $('.collapse').collapse('hide');
});

// Not working!
$('.navbar-toggle').click(function() {
  var expandedMenu;
  expandedMenu = $('.navbar-collapse');
  if (expandedMenu.hasClass('in')) {
    console.log(expandedMenu.hasClass('in'));
    expandedMenu.collapse('hide');
    return expandedMenu.removeClass('in');
  }
});
</code></pre>