Bootstrap collapse navbar on click [duplicate] - html

Question

This question already has answers here:
Hide Twitter Bootstrap nav collapse on click
(31 answers)
Closed 4 years ago.
I'm using bootstraps nav bar.When a user clicks on a nav-bar button, the nav bar stays open. How to collapse the nav bar when a nav-bar button is clicked?.
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a data-toggle="tab" href="#sectionA">Page1</a></li>
<li><a data-toggle="tab" href="#sectionB">Page2</a></li>
<li><a data-toggle="tab" href="#sectionC">Page3</a></li>
</ul>
</div>
</div>
</nav>
Screenshot:
This is how it is after clicking on a nav-bar button (menu stays open):
This is how I want it to be after clicking on a nav-bar button (back to original state):

Answer 1

I have two solutions for this:
First option: data-toggle attribute
You can add the following attributes to the anchors data-toggle="collapse" data-target=".in"
This way, menu will collapse when a menu item is selected.
Here's your code:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<!-- Add data-toggle="collapse" data-target=".in" to <a> elements-->
<!-- This way they will collapse the responsive menu when clicked -->
<li class="active"><a data-toggle="collapse" data-target=".in" href="#sectionA">Page1</a></li>
<li><a data-toggle="collapse" data-target=".in" href="#sectionB">Page2</a></li>
<li><a data-toggle="collapse" data-target=".in" href="#sectionC">Page3</a></li>
</ul>
</div>
</div>
</nav>
Example: http://jsfiddle.net/Frondor/sey4wsah/
2nd alternative option: using jQuery (best method)
If the first example isn't working for you, you can just add a few lines of jQuery below jQuery and Bootstrap.js library calls, don't forget about the jquery.js and Bootstrap.js API:
<script src="/js/jquery.min.js"> <!--suppose these are the same paths you're using for it -->
<script src="/js/bootstrap.min.js">
And below:
<script>
$(document).ready(function () {
$("nav").find("li").on("click", "a", function () {
$('.navbar-collapse.in').collapse('hide');
});
});
</script>
This will match every link on your responsive menu, and collapse said menu at click event.
Give it a try

Answer 2

Keep your bootstrap.min.js file into js folder and add this <script src="js/bootstrap.min.js"></script> before </body> and keep your bootstrap.min.css into css folder and add this <link rel="stylesheet" href="css/bootstrap.min.css"> before </head> .