How to Hide the Boostrap menu when click on nav links in mobile version

Question

I have created one-page website. I have used bootstrap menu with the smooth scroll. When the user clicks on particular section, that section is targeting with the smooth scroll. There is no issue on the desktop.

But when it comes to mobile version,

When I click on Feartures then it's targeting the Featues section with smooth scroll but the menu is still shown on the mobile but whe i click feature section the bootstrap dropdown menu should close.

Please check my code: http://floretmedia.net/temp/pbee/

  <script type="text/javascript"> $(document).ready(function(){ $(".navbar-toggle").click(function(){ if($(".navbar-nav li a")attr("href")){ $(".navbar-toggle in").css("display", "none!important"); }else{ $(".navbar-toggle in").css("display", "block"); } }); function handler(click) { var target = $(".navbar-nav li a"); if ( target.is(".navbar-nav li a")) { target.children().toggle(); } } $("navbar-toggle").click( handler ).find(".collapsed").show(); }); </script> 

 <header> <div class="custom-container"> <div class="header-right"> <div class="navbar-holder"> <!-- navbar-holder --> <nav class="navbar navbar-default"> <!-- navbar-inverse --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed blue" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="ease cf"> <a class="navbar-brand" href="./"> <img src="images/logo.png" alt="sfatech Logo"> </a> </div> </div> <!-- /.navbar-header --> <div id="navbar" class="collapse navbar-collapse cf"> <!-- nav-collapse --> <ul class="nav navbar-nav navbar-right navbrdr"> <li class="active"><a href="./">HOME </a></li> <li><a href="#features"> FEATURES </a></li> <li><a href="#plans">PRICING</a></li> <li><a href="#contact">CONTACT</a></li> <li><a href="includes/enquiry_form.php" class="signup fancybox" data-fancybox-type="iframe">SIGN UP</a></li> </ul> <!-- /.navbar-nav --> </div> <!--/.nav-collapse --> </nav> <!-- /.navbar-inverse --> </div> <!-- /.navbar-holder --> </div><!-- header-right --> </div><!-- custom-container --> </header> 

Answer 1

var mobileMenuButtons = $('.navbar-nav li a');

mobileMenuButtons.on('click', function() {
  if ($( document ).width() < 768) {
    $('.navbar-toggle').click();
  }
});

This code added your js file. Good luck :)

Answer 2

Navbar uses the Bootstrap collapse plugin so you can just call it manually without having to deal with viewport width detection (which can be unreliable):

$('.navbar-nav > li > a').on('click', function() {
    $('.navbar-collapse').collapse('hide');
});