Close responsive navbar automatically

Question

I\'m using a Bootstrap responsive navbar. When the navbar is collapsed and I open the menu and click on a menu item, the menu doesn\'t close automatically, and I have to do

Answer 1

Working solution for bootstrap 3

$('.navbar-collapse a').click(function(){
    $(".navbar-collapse").collapse('hide');
});

Answer 2

@Mike's dropdown solution worked for me except that the items within the dropdown toggle wouldn't hide the menu so I made sure to add this:

$('.navbar-collapse .dropdown-menu').click(function(){
    $(".navbar-collapse").collapse('hide');
});

Answer 3

If you use Angular, you can bind the collapsing to the route navigation:

$scope.$on('$routeChangeSuccess', function(event, toState, toParams, fromState, fromParams){ $(".navbar-collapse").collapse('hide'); });

Answer 4

I complete the answers by adding button click management:

$(document).on('click', '.navbar-collapse.collapse.in a:not(.dropdown-toggle)', function() {
    $(this).closest(".navbar-collapse").collapse('hide');
});
$(document).on('click', '.navbar-collapse.collapse.in button:not(.navbar-toggle)', function() {
    $(this).closest(".navbar-collapse").collapse('hide');
});

Answer 5

I just replicate the 2 attributes of the btn-navbar (data-toggle="collapse" data-target=".nav-collapse") on each link like this:

<div class="nav-collapse">
  <ul class="nav" >
    <li class="active"><a href="#home" data-toggle="collapse" data-target=".nav-collapse">Home</a></li>
    <li><a href="#about" data-toggle="collapse" data-target=".nav-collapse">About</a></li>
    <li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse">Portfolio</a></li>
    <li><a href="#services" data-toggle="collapse" data-target=".nav-collapse">Services</a></li>
    <li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse">Contact</a></li>
  </ul>
</div>

Answer 6

Maybe someone need to hide menu when just click to somewhere else (i have supposed like there is no submenus). Then just add this code somewhere after jquery, bootstrap.js

$('button.navbar-toggle').focusout(function(){
        $(".navbar-collapse").collapse('hide');
    });