Twitter Bootstrap mobile nav: hide menu after clicking menu link

Question

I\'m looking for a way to make the Twitter Bootstrap mobile/tablet nav automatically hide/collapse after clicking a menu link. I have a lot of menu items and so when users e

Answer 1

If you are using sub menu, you have to modify @user2562923's code as follow :

        $('.navbar-collapse a').click(function (e) {
            if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
                $('.navbar-collapse').collapse('toggle');
            }
        });

Answer 2

The easiest way I have found is to use the data attributes on any navbar links where collapsing of the mobile navbar is desired. Use data-target=".navbar-collapse.in" so that the navbar is only toggle in it's open state, and not every time the link is clicked.

<a href="#link" data-toggle="collapse" data-target=".navbar-collapse.in">Link</a>

http://codeply.com/go/bp/lbIb5ZaHbq

Answer 3

If you are using BS3.x you can collapse the mobile nav with markup like this - notice the “data-toggle” and “data-target” in the markup for the home link:

  <nav class="collapse navbar-collapse" role="navigation">
    <ul class="nav navbar-nav">
      <li class="active">
        <a data-toggle="collapse" data-target=".navbar-collapse" href="#home">Home</a>
      </li>
      <li>

You can also collapse the mobile Nav via script like this:

    <script>
      $('.navbar-collapse a').click(function (e) {
        $('.navbar-collapse').collapse('toggle');
      });
    </script>

This approach requires absolutely no extra markup. Each time a link is clicked in the nav it will toggle the navbar.

Cheers.

Answer 4

The navigation should be closed any time a user clicks anywhere on the body - not just navigation elements. Say menu is open, but user clicks in the page body. User expects to see menu close.

You also have to make sure toggle button is visible, otherwise a jump is seen in menu.

$(document).ready(function() { 

$("body").click(function(event) {
        // only do this if navigation is visible, otherwise you see jump in navigation while collapse() is called 
         if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible") ) {
            $('.navbar-collapse').collapse('toggle');
        }
  });

});

Answer 5

Be aware that the approach to add the data-toggle and data-target attributes to the anchor element doesn't work with scrollspy configured. BS's ScrollSpy cannot activate the menu-item any longer.

Answer 6

In case anyone else is interested, I found a solution elsewhere. It's beautifully simple.

Add this id to your markup:

<nav class="nav-main nav-collapse collapse" id="hideonclick" role="navigation">

And add this to your JS:

$('#hideonclick a').click(function (e) {
                e.preventDefault();
                $(this).tab('show');
                if ($('.btn').is(":visible"))
                    $('.btn').click();
            });