Quick Tip: Automatically collapsing Bootstrap navbar after navigation in a single page application

While working on an Angular web application, and using the bootstrap collapsible navbar, I ran into an issue where after clicking on one of the items in the expanded navbar, it did not automatically collapse. The issue stems from the fact that bootstrap was not developed with single page applications in mind, where navigation does not involve a postback to the server.

As I often do when I encounter an issue like this, I checked StackOverflow and quickly found a question about this very problem: Hide Twitter Bootstrap nav collapse on click.

In this case, none of the proposed answers completely solved the problem. However, I was able to piece together my own solution using bits and pieces of some of the answers given. Executing this Javascript on document ready will make sure in a single page application that the Bootstrap navbar collapses properly after you click on a hyperlink contained within it:

$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
    $(this).parents('.navbar-collapse').collapse('hide');
});

5 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *