Bootstrap dropdown does not close on click navigation

Question

This is the code I used on the html page. The drop down appears, but once I click the link it goes to the destination but the menu does not close. It stays on dropdown.

How can I fix it?

 <div class="col-lg-8 col-md-8 col-xs-2 accordion-menu"> <button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#navbar-collapse-toggle-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar-collapse collapse pull-right" id="navbar-collapse-toggle-1"> <ul class="nav navbar-nav navbar-left panel-group no-margin alt-font font-weight-700"> <li><a href="#home" title="Home" class="inner-link" style="font-family:roboto;">Home</a></li> <li><a href="#creative" title="About" class="inner-link" style="font-family:roboto;">About</a></li> <li><a href="#our" title="Treatment" class="inner-link" style="font-family:roboto;">Treatment</a></li> <li><a href="#Aliments" title="Diseases" class="inner-link" style="font-family:roboto;">Diseases</a></li> <li><a href="#Therapy" title="Therapy" class="inner-link" style="font-family:roboto;">Therapy</a></li> <li><a href="#testimonial" title="Testimonials" class="inner-link" style="font-family:roboto;">Testimonials</a></li> <li><a href="#faq" title="FAQ" class="inner-link" style="font-family:roboto;">FAQ</a></li> <li><a href="#us" title="Contact US" class="inner-link" style="font-family:roboto;">Contact US</a></li> </ul> </div> </div> 

Answer 1

@Dash, please check the below working example using bootstrap 4, hope it helps you :)

 <link href="http://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-lg-8 col-md-8 col-xs-2"> <nav class="navbar"> <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon">toggle navigation</span> </button> <div class="navbar-collapse collapse" id="navbarsExample01"> <ul class="navbar-nav m-0 alt-font font-weight-700"> <li class="nav-item active"><a href="#home" title="Home" class="nav-link" style="font-family:roboto;">Home</a></li> <li class="nav-item"><a href="#creative" title="About" class="nav-link" style="font-family:roboto;">About</a></li> <li class="nav-item"><a href="#our" title="Treatment" class="nav-link" style="font-family:roboto;">Treatment</a></li> <li class="nav-item"><a href="#Aliments" title="Diseases" class="nav-link" style="font-family:roboto;">Diseases</a></li> <li class="nav-item"><a href="#Therapy" title="Therapy" class="nav-link" style="font-family:roboto;">Therapy</a></li> <li class="nav-item"><a href="#testimonial" title="Testimonials" class="nav-link" style="font-family:roboto;">Testimonials</a></li> <li class="nav-item"><a href="#faq" title="FAQ" class="nav-link" style="font-family:roboto;">FAQ</a></li> <li class="nav-item"><a href="#us" title="Contact US" class="nav-link" style="font-family:roboto;">Contact US</a></li> </ul> </div> </nav> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="http://getbootstrap.com/docs/4.1/dist/js/bootstrap.min.js"></script>