Bootstrap collapse navbar on click

Question

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):

enter image description here

This is how I want it to be after clicking on a nav-bar button (back to original state): enter image description here

What do you mean the nav bar stays open? Bootstrap drop down menu items always close after you click on a list item or click outside the drop down — GifCo, Sep 11 '14 at 18:08
I do not find anything wrong to your code. Would you please explain it more details? Can you attach screen shot of your problem? — Bir, Sep 11 '14 at 18:09
Are you initializing the jquery script for the mobile dropdown? Sometimes people forget to do that. — itamar, Sep 11 '14 at 18:18
Do you want to do that? or do you want to know how to do that? — Bir, Sep 11 '14 at 18:19
check . Your code is working https://dl.dropboxusercontent.com/u/168659703/quick-start/index.html — Bir, Sep 11 '14 at 18:21
@Bir: The menu doesnot collapse when a menu item is selected. The menu stays open. — Fergoso, Sep 11 '14 at 18:25

Frondor · Accepted Answer · 2014-09-11T19:17:00.607

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

The contents in #sectionA, #sectionB and #sectionC doesn't show. — Fergoso, Sep 11 '14 at 18:39
Check now, I've edited my question and added an alternative option. Check it here http://fiddle.jshell.net/Frondor/sey4wsah/show/#sectionA third link has no data-toggle/data-target attribute and still collapses the menu when clicked because of the little jQuery script I've added. Give it a try and tell me if it works for you please — Frondor, Sep 11 '14 at 19:14

score 0 · Answer 2 · answered Sep 11 '14 at 18:26

0

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> .

answered Sep 11 '14 at 18:26

Bir

794
1
15
31

Everything is in place. doesn't work. – Fergoso Sep 11 '14 at 18:41
Can you provide your site link @Fergoso – Bir Sep 11 '14 at 18:41

Bootstrap collapse navbar on click

2 Answers2

First option: data-toggle attribute

Example: http://jsfiddle.net/Frondor/sey4wsah/

2nd alternative option: using jQuery (best method)