125

I have a more or less standard navigation from bootstrap 3

<body data-spy="scroll" data-target=".navbar-collapse">
    <!-- ---------- Navigation ---------- -->
    <div class="navbar navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                </button>
                <a class="navbar-brand" href="index.html"> <img src="#"></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#home">Home</a></li>
                    <li><a href="#one">One</a></li>
                    <li><a href="#two">Two</a></li>
                    <li><a href="#three">Three</a></li>
                    <li><a href="#four">Four</a></li>
                </ul>
            </div>
        </div>
    </div>

It collapses normally on smaller devices. Clicking on the menu button expands the menu but if I click (or touch for that matter) on a menu link, the menu stays open. What do I have to do, to close it again?

2

24 Answers 24

138

Just to share this from solutions on GitHub, this was the popular answer:

https://github.com/twbs/bootstrap/issues/9013#issuecomment-39698247

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') ) {
        $(this).collapse('hide');
    }
});

This is wired to the document, so you don't have to do it on ready() (you can dynamically append links to your menu and it will still work), and it only gets called if the menu is already expanded. Some people have reported weird flashing where the menu opens and then immediately closes with other code that did not verify that the menu had the "in" class.

[UPDATE 2014-11-04] apparently when using sub-menus, the above can cause problems, so the above got modified to:

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a:not(".dropdown-toggle")') ) {
        $(this).collapse('hide');
    }
});
5
  • Can you explain '$(this).collapse('hide');' please. i don't understand where 'collapse' comes from
    – timebandit
    Commented Aug 21, 2015 at 20:53
  • @ImranNazir, sorry this is way after the question, but collapse is a method defined by bootstrap and attached to the jQuery object...presumably, they re-use this for multiple purposes (accordion, navbar, etc): getbootstrap.com/javascript/#collapse-usage Commented Oct 27, 2015 at 15:03
  • Updated code worked for me, answers above this did not. Thanks!
    – RandomUs1r
    Commented Jun 23, 2017 at 19:17
  • The "[UPDATE 2014-11-04]" worked. As for the other solution where it recommend to remove duplicate reference to bootstrap.js and jquery that is not necessary the solution. I found this solution to fix the problem with less time to waist on debugging and with more explicit behavior. Thank you!. I hope this helps you as it did help me. Commented Oct 6, 2017 at 9:07
  • Perfect answer! Worked like charm.
    – krsna
    Commented Oct 30, 2017 at 4:28
127

Change this:

<li><a href="#one">One</a></li>

to this:

<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#one">One</a></li>  

This simple change worked for me.

Ref: https://github.com/twbs/bootstrap/issues/9013

6
  • 14
    This solution is fine for Mobile view but it shows show/hide animation in large screens once link clicked. Commented Jun 25, 2015 at 6:05
  • 22
    @AymanAl-Absi You have to add .in to the end of the data-target value: data-target=".navbar-collapse.in". From comment in this answer: stackoverflow.com/a/21797534/89818
    – caw
    Commented Jun 7, 2016 at 16:09
  • this works great for me but it breaks the scrollspy, any idea why that might be? Commented Feb 10, 2017 at 17:58
  • 1
    Worked for me when updated above code with @caw answer. I am also using scrollspy feature.
    – Niraj
    Commented Jun 8, 2017 at 13:37
  • 1
    if you use <NavLink to="/path"></NavLink> it won't work , it just collapse the toggle , yes it work with <a> tags but not <NavLink> any idea , how to solve it ? Commented Dec 17, 2018 at 3:47
55

I had the same problem but caused by including twice bootstrap.js and jquery.js files.

On a single click the event was processed twice by both jquery instances. One closed and one opened the toggle.

8
  • 3
    I had the exact same problem but didn't realize they were being included twice. Thanks for posting this! Commented Nov 23, 2014 at 19:47
  • 2
    Man! I did the same thing - I guess I'm back to being an intern!
    – Dicer
    Commented Jan 6, 2016 at 1:03
  • 2
    So helpful! I had been working on this for days. This can be very common when using a navbar template. Be careful people! :) Commented Mar 17, 2016 at 17:06
  • 2
    This should be marked as the best answer. I had the same problem removing bootstrap.js solved the problem
    – katwekibs
    Commented Aug 14, 2016 at 8:09
  • 1
    Included Jquery twice
    – Prasad
    Commented Nov 16, 2016 at 13:39
47

Bootstrap's default setting is to keep the menu open when you click on a menu item. You can manually override this behaviour by calling .collapse('hide'); on the jQuery element that you want to collapse.

2
  • 11
    This is wrong, bootstrap toggle automatically the "collapse" class. You don't need any additional jquery code. If you have such behaviour, it means something is wrong in your html code (for my part I was including twice jquery and bootstrap, see the answer of @raisercostin).
    – RomOne
    Commented Feb 15, 2017 at 0:54
  • @RomOne This answer is correct. Bootstrap does not close the menu after links are clicked by default. The other answer is only applicable if people incorrectly include jQuery twice which is not the correct answer to this question. Commented Feb 22, 2017 at 21:18
17
$(".navbar-nav li a").click(function(event) {
    if (!$(this).parent().hasClass('dropdown'))
        $(".navbar-collapse").collapse('hide');
});

This would help in handling drop down in nav bar

2
  • This fixed my problem where using bootstrap with the javascript from a jssor slideshow created issues. This code also creates a cool effect when expanding and collapsing the mobile menu.
    – Adam West
    Commented May 1, 2016 at 18:40
  • Thanks, forgot that Laravel 5.5 JS includes B and Jquery in the main js file.
    – Jack Vial
    Commented Oct 26, 2017 at 20:02
13

I am having/had similar issues with Bootstrap 4, alpha-6, and Joakim Johanssons answer above started me in the right direction. No javascript required. Putting data-target=".navbar-collapse" and data-toggle="collapse" into the div tag inside the nav, but surrounding the links/buttons, worked for me.

<div class="navbar-nav" data-target=".navbar-collapse" data-toggle="collapse">
   <a class="nav-item nav-link" href="#">Menu Item 1</a>
   ...
</div>

2
  • Your post helped me alot. This solved it for me <body data-toggle="collapse" data-target=".navbar-collapse">
    – Dessus
    Commented Jan 28, 2018 at 4:30
  • This was already posted 3 years ago. Additionally, it breaks the animation in the non-mobile view.
    – Bevor
    Commented Feb 18, 2019 at 18:40
6

I did

$(".navbar-toggle").click(function(event) {
    $(".navbar-collapse").toggle('in');
});
6

I know this question is for Bootstrap 3 but if you are looking solution for Bootstrap 4, just do this:

$(document).on('click','.navbar-collapse.show',function(e) {
  $(this).collapse('hide');
});
4
  • I'm using BS4 beta and your code works perfectly. I tried all the other suggested solutions here with no luck. BS4 apparently has changed enough that other solutions just don't apply. Commented Jan 1, 2018 at 18:05
  • For relevance and to keep things concurrent with updated information - This should be best answer.
    – Ricky
    Commented Feb 25, 2018 at 13:38
  • @Ricky OP specified Bootstrap 3, not 4.
    – Malavos
    Commented May 8, 2018 at 13:22
  • For menus with drop-downs I used this: $(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); } Commented Mar 13, 2019 at 1:40
5

I had the same problem, I was using jQuery-1.7.1 and bootstrap 3.2.0. I changed my jQuery version to the latest (jquery-1.11.2) version and everything works well.

0
4

Though the solution posted earlier to change the menu item itself, like below, works when the menu is on a small device, it has a side effect when the menu is on full width and expanded, this can result in a horizontal scrollbar sliding over your menu items. The javascript solutions do not have this side-effect.

<li><a href="#one">One</a></li> to 
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#one">One</a></li>  

(sorry for answering like this, wanted to add a comment to that answer, but, seems I haven't sufficient credit to make remarks )

3
 $(function(){ 
    var navMain = $("#your id");
    navMain.on("click", "a", null, function () {
      navMain.collapse('hide');
    });
});
3
  • check it new version Matthias S :-)
    – Chit
    Commented Sep 5, 2017 at 8:25
  • @bfontaine First, You have to add id in your menu div, and when you click on your menu then after all menu will be hide. For example:- When you click on about us menu then rest menu tab will be hide.
    – Chit
    Commented Sep 6, 2017 at 10:27
  • 1
    thank you, but please write that in your answer ;)
    – bfontaine
    Commented Sep 6, 2017 at 11:51
1

In case you want to manually override this behaviour by calling .collapse('hide') within an angular's directive, here is the code:

javascript file:

angular
  .module('yourAppModule')
  .directive('btnAutoCollapse', directive);

function directive() {
  var dir = {
    restrict: 'A',
    scope: {},
    link: link
  };
  return dir;

  function link(scope, element, attrs) {    
    element.on('click', function(event) {              
      $(".navbar-collapse.in").collapse('hide');
    });
  }
}

Html:

<li class="navbar-btn">
     <a href="#" ng-hide="username" **btn-auto-collapse**>Sign in</a>
</li>
1

Please make sure You are using latest bootstrap js version. I was facing the same problem and just upgrading the bootstrap.js file from bootstrap-3.3.6 did the magic.

1

This is the code that worked for me:

jQuery('document').ready(function()
{   
   $(".navbar-header button").click(function(event) {
   if ($(".navbar-collapse").hasClass('in'))
   {  $(".navbar-collapse").slideUp();  }
});})
1

If you only want your navigation to toggle when used on a mobile screen, just adding data-toggle="collapse" and data-target="#navbar" to your a elements will work on the mobile screen, but will give you a weird flicker when clicked on a desktop screen. The jQuery solutions do not work well if you are in an Aurelia or Angular environment.

The best solution for me was to create a custom attribute that listens to the corresponding media query and adds in the data-toggle="collapse"attribute if desired:

<a href="#" ... collapse-toggle-if-less768 data-target="#navbar"> ...

The custom attribute with Aurelia looks like this:

import {autoinject} from 'aurelia-framework';

@autoinject
export class CollapseToggleIfLess768CustomAttribute {
  element: Element;

  constructor(element: Element) {
    this.element = element;
    var mql = window.matchMedia("(min-width: 768px)");
    mql.addListener((mediaQueryList: MediaQueryList) => this.handleMediaChange(mediaQueryList));
    this.handleMediaChange(mql);
  }

  handleMediaChange(mediaQueryList: MediaQueryList) {
    if (mediaQueryList.matches) {
      var dataToggle = this.element.attributes.getNamedItem("data-toggle");
      if (dataToggle) {
        this.element.attributes.removeNamedItem("data-toggle");
      }
    } else {
      var dataToggle = this.element.attributes.getNamedItem("data-toggle");
      if (!dataToggle) {
        var dataToggle = document.createAttribute("data-toggle");
        dataToggle.value = "collapse";
        this.element.attributes.setNamedItem(dataToggle);
      }
    }
  }
}

1

I had the same issue only on mobile but for an Angular application and this is what I did:

app.component.html

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="col-md-12">
      <div class="navbar-header page-scroll">
      <button id ="navButton" style="color:red"type="button" class="navbar-toggle" 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" routerLink="/"><img id="navbrand" class="site-logo"  src="assets/img/yayaka_logo.png"/></a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="hidden">
          <a href="#page-top"></a>
        </li>
        <li class="dropdown" appDropdown>
          <a class="dropdown-toggle" style="cursor: pointer;">
            ΤΙ ΕΙΝΑΙ ΤΟ yayaka<span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a (click) = "closeMenu()" href="/#about">About</a></li>
            <li><a (click) = "closeMenu()" href="/#services">Services</a></li>
          </ul>
        </li>
        <li class="page-scroll">
          <a (click) = "closeMenu()" routerLink="/profiles"><strong>Profiles</strong></a>
        </li>
      </ul>
    </div>
  </div>
  </div>
</nav>

app.component.ts

 closeMenu() {
    var isMobile = /iPhone|iPad|iPod|BlackBerry|Opera Mini|IEMobile|Android/i.test(navigator.userAgent);
    if (isMobile) {
      document.getElementById('navButton').click();
    }
  }

Hope it helps :)

0

I found that after much struggle, trial and error, the best solution for me on jsfiddle. Link to inspiration on jsfiddle.net. I am using bootstrap's navbar navbar-fixed-top with collapse and hamburger toggle. Here is my version on jsfiddle: jsfiddle Scrollspy navbar. I was only getting basic functionality using the instructions on getbootsrap.com. For me, the problem was mostly in the vague directions and js recommended by the getbootstrap site. The best part was that adding this extra bit of js (which does include some of what is mentioned in the above threads) solved several Scrollspy issues for me including:

  1. Collapsed/toggled nav menu hides when nav "section" (e.g. href="#foobar") is clicked (issue addressing this thread).
  2. Active "section" was successfully highlighted (ie. js successfully created class="active")
  3. Annoying vertical scroll bar found on collapsed nav (only on small screens) was eliminated.

NOTE: In the js code shown below (from the second jsfiddle link in my post):

topMenu = $("#myScrollspy"),

...the value "myScrollspy" must match it the id="" in your HTML like so...

<nav id="myScrollspy" class="navbar navbar-default navbar-fixed-top">

Of course you can change that value to whatever value you like.

0

All you need is data-target=".navbar-collapse" in the button, nothing else.

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
2
  • +1 : It also works by adding data-toggle="collapse" data-target=".navbar-collapse" to <a /> or in my case <Link /> in Meteorjs with React, Thank you.
    – Joe L.
    Commented May 15, 2016 at 18:55
  • yes it works with <a/> but it didn't work with <NavLink/> , it collapses but , <NavLink/> isn't working any more , any ideas why ? Commented Dec 17, 2018 at 3:51
0

I had the same problem, ensure that bootstrap.js is included in your html page. In my case the menu opened but did not close. As soon as I included the bootstrap js file, everything just worked.

0

Simple Try to make a function in javascript for dropdown collapse class.

Example:

JS:

$scope.toogleMyClass  = function(){

    //dropdown-element

    $timeout(function(){
        $scope.preLoader = false;
        $(document).ready(function() {
            $("#dropdown-element").toggleClass('show');
        });
    },100);

};

Hook this function to onClick simple works for me.

0

I had the similar issue but mine wouldn't stay open it would open/close quickly, I found that I had jquery-1.11.1.min.js loading before bootstrap.min.js. So I reversed the order of those 2 files and fixed my menu. Runs flawlessly now. Hope it helps

0

The problem could be you are using out of date versions of bootstrap or jquery, OR you are calling more than one version in your markup.

Just keep the latest versions, you only need the one reference. Solves the problem.

0

you may want to just ensure you're loading your jQuery and Bootstrap.min.js ATF. Your navigation is the first thing to render on the page, so if you have your scripts in the bottom of your HTML, you're losing any JavaScript functionality.

-2

My menu is not a navbar standard one, but i managed to auto collapse mine, using an "onclick" function and a ".click()".

<div class="main-header">
    <div class="container">
        <div id="menu-wrapper">
            <div class="row">

                <div class="logo-wrapper col-lg-4 col-md-6 col-sm-7 hidden-xs">

                </div> <!-- /.logo-wrapper -->

                <div class="logo-wrapper2 visible-xs col-xs-9">

                </div> <!-- /.smaller logo-wrapper -->

                <div class="col-lg-8 col-md-6 col-sm-5 col-xs-3 main-menu text-center">
                    <ul class="menu-first hidden-md hidden-sm hidden-xs">
                        <li class="active"><a href="#">item1</a></li> |
                        <li><a href="#our-team">item2</a></li> |
                        <li><a href="#services">item3</a></li> |
                        <li><a href="#elia">item4</a></li> |
                        <li><a href="#portfolio">item5</a></li> |
                        <li><a href="#contact">item6</a></li>
                    </ul>
                    <a href="#" class="toggle-menu visible-md visible-sm visible-xs"><i class="fa fa-bars"></i></a>
                </div> <!-- /.main-menu -->
            </div> <!-- /.row -->
        </div> <!-- /#menu-wrapper -->
        <div class="menu-responsive hidden-lg">
            <ul>
                <li class="active" onclick = $(".toggle-menu").click();><a href="#">item1</a></li>
                <li><a href="#our-team" onclick = $(".toggle-menu").click();>item2</a></li>
                <li><a href="#services" onclick = $(".toggle-menu").click();>item3</a></li>
                <li><a href="#elia" onclick = $(".toggle-menu").click();>item4</a></li>
                <li><a href="#portfolio" onclick = $(".toggle-menu").click();>item5</a></li>
                <li><a href="#contact" onclick = $(".toggle-menu").click();>item6</a></li>
            </ul>
        </div> <!-- /.menu-responsive -->
    </div> <!-- /.container -->
</div> <!-- /.main-header 
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.