title: How to Close Twitter Bootstrap 3 Collapse Navbar upon Clicking a Menu Item
body: <p>I know this has been discussed in other threads, but I've very new to coding websites in general, and when I try to use the solutions others have come up with, they just don't seem to work. And I apologize if my terminology isn't quite right, but hopefully you'll be able to understand!</p>
  
  <p>On the site I'm building on my localhost, I have it so that the Bootstrap navbar I'm using remains collapsed on desktop, tablet, and mobile. The navbar is a sticky nav, and when you select an item from the menu it scrolls down to the item's anchor. The problem is, since the menu remains open when an item is clicked, the dropdown covers part of the div it anchors to.</p>
  
  <p>This is the code for my navbar:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default" role="navigation"&gt;
                    &lt;div class="container-fluid"&gt;
  
                         &lt;div class="navbar-brand"&gt;
                             &lt;h2&gt;My Title&lt;/h2&gt;
                         &lt;/div&gt;
  
                      &lt;div class="navbar-header"&gt;
                        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&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;/div&gt;
  
  
                          &lt;?php
                              wp_nav_menu( array(
                                  'menu'              =&gt; 'menu-1',
                                  'theme_location'    =&gt; 'primary',
                                  'depth'             =&gt; 2,
                                  'container'         =&gt; 'div',
                                  'container_class'   =&gt; 'collapse navbar-collapse',
                                  'container_id'      =&gt; 'bs-example-navbar-collapse-1',
                                  'menu_class'        =&gt; 'nav navbar-nav',
                                  'fallback_cb'       =&gt; 'wp_bootstrap_navwalker::fallback',
                                  'walker'            =&gt; new wp_bootstrap_navwalker())
                              );
                          ?&gt;
                      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I've seen solutions like this:</p>
  
  <pre><code> $('.nav-collapse').click('li', function() {
   $('.nav-collapse').collapse('hide');
   });
  </code></pre>
  
  <p>But when I try adding it to my code it doesn't work. I've been putting it in my head, but I'm not sure if that's where I should be inserting it. Should I be putting that in the bootstrap.js file, or should I be downloading another javascript library?</p>
  
  <p>Try to be very descriptive with your answer if you can, because to reiterate, I'm very new to this and I'm still in the process of learning.</p>
  
  <p>Thanks so much,<br />
  Angela</p>