title: How to hide collapsible Bootstrap navbar on click
body: <p>I've created this collapsable navbar using Bootstrap 4 that works nicely, but I would like it to close when the user clicks on a link. Any way to do this?  Thanks</p>
  
  <p>html navbar:</p>
  
  <pre><code>&lt;nav class="navbar navbar-toggleable-md fixed-top"&gt;
  
  &lt;button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv"  aria-expanded="false" aria-label="Toggle navigation"&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 class="container"&gt;
  
                  &lt;a class="navbar-brand" href="#"&gt;&lt;img src="Images/logo.png" width="60px"&gt;&lt;/a&gt;
  
                      &lt;div class="collapse navbar-collapse" id="navbarDiv"&gt;
  
                          &lt;ul class="navbar-nav mr-auto"&gt;
  
                              &lt;li class="nav-item active"&gt;
  
                                  &lt;a class="nav-link" href="#home"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
  
                              &lt;/li&gt;
  
                              &lt;li class="nav-item"&gt;
  
                                  &lt;a class="nav-link" href="#about-us"&gt;About&lt;/a&gt;
  
                              &lt;/li&gt;
  
                              &lt;li class="nav-item"&gt;
  
                                  &lt;a class="nav-link" href="#pricing"&gt;Pricing&lt;/a&gt;
  
                              &lt;/li&gt;
  
                          &lt;/ul&gt;
  
                      &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/nav&gt;
  </code></pre>
  
  <p>css for .icon-bar, since Bootstrap 4 doesn't use the icon-bar class.</p>
  
  <pre><code>.navbar-toggler .icon-bar {
    margin: 7px;
    display: block;
    width: 22px;
    height: 1px;
    background-color: #cccccc;
    border-radius: 1px;
  }
  </code></pre>