Bootstrap 3 collapsed menu doesn't close on click

Question

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?

the answer of user3669917 is certainly the easiest and most straight forward answer! — Thomas, Apr 03 '15 at 16:17
Possible duplicate of [Hide Twitter Bootstrap nav collapse on click](http://stackoverflow.com/questions/16680543/hide-twitter-bootstrap-nav-collapse-on-click) — Inanc Gumus, Dec 14 '16 at 21:31

score 138 · Answer 1 · edited Dec 15 '17 at 01:01

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');
    }
});

edited Dec 15 '17 at 01:01

Aaron

2,049
4
28
35

answered Apr 07 '14 at 15:45

Kevin Nelson

7,613
4
31
42

1

Works flawlessly. Thanks for sharing! – Rodrigo Chiong May 28 '15 at 00:46
Can you explain '$(this).collapse('hide');' please. i don't understand where 'collapse' comes from – timebandit Aug 21 '15 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): http://getbootstrap.com/javascript/#collapse-usage – Kevin Nelson Oct 27 '15 at 15:03
Updated code worked for me, answers above this did not. Thanks! – RandomUs1r Jun 23 '17 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. – Nour Lababidi Oct 06 '17 at 09:07
Perfect answer! Worked like charm. – coderpc Oct 30 '17 at 04:28

score 127 · Answer 2 · edited Oct 30 '15 at 12:33

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

edited Oct 30 '15 at 12:33

Joakim Johansson

3,196
1
27
43

answered Jul 10 '14 at 20:38

FullStackDev

1,569
1
10
7

14

This solution is fine for Mobile view but it shows show/hide animation in large screens once link clicked. – Ayman Al-Absi Jun 25 '15 at 06: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: http://stackoverflow.com/a/21797534/89818 – caw Jun 07 '16 at 16:09
this works great for me but it breaks the scrollspy, any idea why that might be? – Craig Harley Feb 10 '17 at 17:58
1

Worked for me when updated above code with @caw answer. I am also using scrollspy feature. – Niraj Jun 08 '17 at 13:37
This is by far the best solution. No javascript, no jQuery. If you want certain link to keep the menu opened, just don't add these params. Should be pointed as the best answer. Thank you. – ed1nh0 Feb 09 '18 at 12:00
1

if you use `` it won't work , it just collapse the toggle , yes it work with `` tags but not `` any idea , how to solve it ? – The pyramid Dec 17 '18 at 03:47

score 55 · Answer 3 · answered Oct 16 '14 at 11:39

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.

answered Oct 16 '14 at 11:39

raisercostin

8,777
5
67
76

3

I had the exact same problem but didn't realize they were being included twice. Thanks for posting this! – Brian ONeil Nov 23 '14 at 19:47
2

So did our intern. Thanks for posting this. – Teisman Jul 21 '15 at 11:23
2

Man! I did the same thing - I guess I'm back to being an intern! – Dicer Jan 06 '16 at 01: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! :) – Matt Butler Mar 17 '16 at 17:06
2

This should be marked as the best answer. I had the same problem removing bootstrap.js solved the problem – katwekibs Aug 14 '16 at 08:09
1

Included Jquery twice – Prasad Nov 16 '16 at 13:39
1

Worked for me. Interesting that I had to remove a class in order to get this to work.
which added a nice scroll effect.

ControlZ

Jan 19 '17 at 10:13

As one who are modifying other's code, I was stuck in this issue for two days until I find this answer. Thanks! – JamesYTL Aug 11 '17 at 06:50

Thanks so much! Originally, I thought it was the ordering of the files (as some others had issue with), but then I thought it was a matter of wrongly labeled classes, but this was exactly my problem. – Dave Liu Jan 16 '18 at 23:24

score 47 · Accepted Answer · answered Jan 18 '14 at 11:08

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.

answered Jan 18 '14 at 11:08

VCNinc

747
1
9
25

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 Feb 15 '17 at 00:54
@RomOne This answer is correct. Bootstrap [does **not** close the menu after links are clicked](http://getbootstrap.com/examples/starter-template/) by default. The other answer is *only* applicable if people incorrectly include jQuery twice which is not the correct answer to this question. – Carol Skelly Feb 22 '17 at 21:18

score 17 · Answer 5 · edited Oct 30 '15 at 12:34

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

edited Oct 30 '15 at 12:34

Joakim Johansson

3,196
1
27
43

answered Sep 01 '15 at 16:26

Chakradhar Vyza

285
4
11

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 May 01 '16 at 18:40
Thanks @Chakradhar , it saved my time. – Omar Bahir Nov 02 '16 at 14:41
Thanks, forgot that Laravel 5.5 JS includes B and Jquery in the main js file. – Jack Vial Oct 26 '17 at 20:02

score 13 · Answer 6 · edited May 23 '17 at 11:47

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>

edited May 23 '17 at 11:47

Community

1
1

answered Jan 21 '17 at 23:11

Paul

149
1
3

Your post helped me alot. This solved it for me – Dessus Jan 28 '18 at 04:30
This was already posted 3 years ago. Additionally, it breaks the animation in the non-mobile view. – Bevor Feb 18 '19 at 18:40

score 6 · Answer 7 · edited Oct 30 '15 at 12:33

6

I did

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

edited Oct 30 '15 at 12:33

Joakim Johansson

3,196
1
27
43

answered Feb 23 '14 at 11:58

weaveoftheride

4,092
8
35
53

Syed · Answer 8 · 2018-05-08T13:48:33.533

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');
});

edited May 08 '18 at 13:48

answered May 31 '17 at 07:58

Syed

15,657
13
120
154

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. – Bicycle Dave Jan 01 '18 at 18:05
For relevance and to keep things concurrent with updated information - This should be best answer. – Ricky Feb 25 '18 at 13:38
@Ricky OP specified Bootstrap 3, not 4. – Malavos May 08 '18 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'); }` – James Wilkins Mar 13 '19 at 01:40

score 5 · Answer 9 · edited Jun 30 '15 at 14:28

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.

edited Jun 30 '15 at 14:28

Pieter VDE

2,195
4
25
44

answered Oct 14 '14 at 16:53

Densol

135
2
5

score 4 · Answer 10 · answered May 16 '15 at 10:43

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 )

Chit · Answer 11 · 2017-09-05T08:21:26.930

3

 $(function(){ 
    var navMain = $("#your id");
    navMain.on("click", "a", null, function () {
      navMain.collapse('hide');
    });
});

edited Sep 05 '17 at 08:21

answered Aug 31 '17 at 09:04

Chit

293
2
12

check it new version Matthias S :-) – Chit Sep 05 '17 at 08: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 Sep 06 '17 at 10:27
1

thank you, but please write that *in* your answer ;) – bfontaine Sep 06 '17 at 11:51

Mirna De Jesus · Answer 12 · 2015-08-14T20:10:51.157

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>

score 1 · Answer 13 · answered Jun 14 '16 at 20:30

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.

answered Jun 14 '16 at 20:30

Aman Arun

11
2

score 1 · Answer 14 · answered Jun 21 '16 at 12:12

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();  }
});})

answered Jun 21 '16 at 12:12

Roddy P. Carbonell

858
1
11
16

score 1 · Answer 15 · answered Jan 04 '17 at 14:13

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);
      }
    }
  }
}

stathoula · Answer 16 · 2019-05-11T17:01:46.323

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

score 0 · Answer 17 · edited Oct 30 '15 at 12:35

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>

edited Oct 30 '15 at 12:35

Joakim Johansson

3,196
1
27
43

answered Aug 24 '14 at 10:34

Marodo

111
1
10

+1 : It also works by adding data-toggle="collapse" data-target=".navbar-collapse" to or in my case in Meteorjs with React, Thank you. – Joe L. May 15 '16 at 18:55
yes it works with `` but it didn't work with `` , it collapses but , `` isn't working any more , any ideas why ? – The pyramid Dec 17 '18 at 03:51

Acal · Answer 18 · 2015-06-03T22:48:03.053

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:

Collapsed/toggled nav menu hides when nav "section" (e.g. href="#foobar") is clicked (issue addressing this thread).
Active "section" was successfully highlighted (ie. js successfully created class="active")
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.

score 0 · Answer 19 · answered Sep 25 '16 at 12:06

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.

answered Sep 25 '16 at 12:06

Elitmiar

35,072
73
180
229

score 0 · Answer 20 · edited Oct 03 '16 at 13:00

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.

edited Oct 03 '16 at 13:00

Ishita Sinha

2,168
4
25
38

answered Oct 03 '16 at 10:51

yasir_mughal

112
10

score 0 · Answer 21 · answered Nov 09 '16 at 14:47

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

answered Nov 09 '16 at 14:47

Vasko

257
3
13

score 0 · Answer 22 · answered Dec 12 '16 at 15:20

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.

answered Dec 12 '16 at 15:20

Nick

185
2
14

score 0 · Answer 23 · answered May 09 '17 at 11:30

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.

answered May 09 '17 at 11:30

Chris Johnson

425
1
8
19

score -2 · Answer 24 · edited Oct 30 '15 at 12:37

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

Bootstrap 3 collapsed menu doesn't close on click

24 Answers24

Linked

Related