Hide Twitter Bootstrap nav collapse on click

Question

This is not a submenu dropdown, the category is class li as in the picture:

enter image description here

By selecting a category from the responsive menu (the template is just one page), I want to hide nav collapse automatically when clicking. Also stroll to use as navigation, since the template has only one page. I seek a solution that does not affect it, here is the HTML code of menu:

    <!-- NAVBAR
  ================================================== -->
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Carousel Demo</a>
      <div class="nav-collapse">
        <ul class="nav" >
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
          <!-- dropdown -->
        </ul>
        <!-- /.nav -->
      </div>
      <!--/.nav-collapse -->
    </div>
    <!-- /.container -->
  </div>
  <!-- /.navbar-inner -->
</div>
<!-- /.navbar -->

@WooCaSh Worked rather the order of their solution custom.js was wrong, I noticed $ ('nav a'). On ('click', function () {and in my case it is a class, then $ ('. nav a '). on (' click ', function () {. thank you, you helped me a lot! — Tim Vitor, May 22 '13 at 01:18
possible duplicate of [Close responsive navbar automatically](http://stackoverflow.com/questions/14248194/close-responsive-navbar-automatically) — chrylis -cautiouslyoptimistic-, Dec 16 '13 at 04:59
If you don't want to try and compare all these solutions here yourself, [edit #1 from this answer](http://stackoverflow.com/a/23171593/89818) is what you should do. — caw, Sep 30 '14 at 13:14
You could see my answer here http://stackoverflow.com/questions/14248194/close-responsive-navbar-automatically#answer-26191027 — Camel, Oct 04 '14 at 08:44
**Bootstrap 4** method: https://stackoverflow.com/questions/42401606/how-to-hide-collapsible-bootstrap-4-navbar-on-click/42401686 — Carol Skelly, Mar 06 '18 at 17:09
@TimVitor I have added an updated answer, see: https://stackoverflow.com/a/75808109/10686802 — Remzi Cavdar, Mar 22 '23 at 03:08

score 166 · Accepted Answer · edited Jul 30 '18 at 08:58

166

try this:

$('.nav a').on('click', function(){
    $('.btn-navbar').click(); //bootstrap 2.x
    $('.navbar-toggle').click(); //bootstrap 3.x by Richard
    $('.navbar-toggler').click(); //bootstrap 4.x
});

edited Jul 30 '18 at 08:58

Community

1
1

answered May 21 '13 at 22:32

WooCaSh

5,180
5
36
54

1

This worked great. Thanks WooCaSh. Also just suggested adding a "." to the code before $('nav a') => $('.nav a'). [Class selector was missing a dot "."] – Clain Dsilva Aug 05 '13 at 06:44
7

FYI, this doesn't work in all cases. If the window is re sized and it brings up the mobile menu it will be open by default. – Andrew Boes Sep 13 '13 at 19:59
8

UPDATE: Usual selector for bootstrap 3 is .navbar-toggle, so $(".navbar-toggle").click(); – Richard Oct 10 '13 at 19:43
1

If you have dropdowns in your navbar, you don't want to collapse when clicking on the dropdown. This worked for me: $('.nav :not(.dropdown) a').on(... – Dr. Mike Hopper Aug 11 '14 at 00:29
41

This is causing issues in the navbar. Better to use $('.nav-collapse').collapse('hide'); on click event rather than making the toggle button click. – Rohan Oct 22 '14 at 23:02
Thanks @Ronan, after trying all the solutions, yours is the best one on mobile and desktop. You saved my day and should get the "correct answer". – xBill Oct 31 '14 at 19:34
7

When the navbar is open in "desktop" mode it will flicker or close then reopen when using this. – mlapaglia Feb 16 '15 at 19:41
jQuery('.navbar-collapse').addClass('collapse'); was the most effective method in Bootstrap 3. – Michael May 11 '16 at 21:28
when menu is open you can see there is "in" class active `
` just need to remove "in" there and it worked `$('.navbar-collapse').removeClass('in');`
– Braham Dev Yadav May 01 '17 at 19:03
The collapsing of the navigation should be done with bootstrap. You've build it with bootstrap, fix it with bootstrap if possible: look at Zu1779's answer and the comments. Way cleaner and makes a way more sense. The way to handle it is available in bootstrap itself, why ignore that? – Nrzonline Sep 12 '17 at 09:24

score 135 · Answer 2 · edited Feb 22 '17 at 20:46

135

I just replicate the 2 attributes of the btn-navbar (data-toggle="collapse" data-target=".nav-collapse.in") on each link like this:

<div class="nav-collapse">
  <ul class="nav" >
    <li class="active"><a href="#home" data-toggle="collapse" data-target=".nav-collapse.in">Home</a></li>
    <li><a href="#about" data-toggle="collapse" data-target=".nav-collapse.in">About</a></li>
    <li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse.in">Portfolio</a></li>
    <li><a href="#services" data-toggle="collapse" data-target=".nav-collapse.in">Services</a></li>
    <li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse.in">Contact</a></li>
  </ul>
</div>

In the Bootstrap 4 Navbar, in has changed to show so the syntax would be:

data-toggle="collapse" data-target=".navbar-collapse.show"

edited Feb 22 '17 at 20:46

Carol Skelly

351,302
90
710
624

answered Feb 15 '14 at 12:27

Zu1779

2,178
1
18
17

13

Adding `data-toggle` and `data-target` to
is cleaner solution. Thanks.

trante

Apr 19 '14 at 08:31

9

Works well on mobile, but causes the navbar collapse animation on desktop too, which is undesirable. – James Brewer Feb 18 '15 at 02:10

Gives a navbar animation (quick expand/collapse) on navbar item clicks. This happens even when the collapse button is not shown. Not ideal. – lostintranslation Mar 20 '15 at 16:05

35

@JamesBrewer To avoid the collapse animation on the desktop version add `.in` to the data-target: `data-toggle="collapse" data-target=".nav-collapse.in"` – Daghall Mar 21 '15 at 22:16

I like this no-manual-script version. Better with other frameworks – Stalin Gino Dec 08 '15 at 08:41

23

Don't forget to replace .nav-collapse with .navbar-collapse for bootstrap 3 – kuceram Mar 29 '16 at 14:37

3

This should be the accepted answer! Thank you for posting it! – trixtur Jul 18 '16 at 04:16

Would adding this to the body element be a bad idea if I wanted to collapse the menu if someone clicks anywhere on the page? – scorgn Aug 01 '17 at 22:08

2

Putting this on

under it, you can avoid repeating this line.

– Zeus Nov 14 '18 at 06:36

Awesome! I was adding Jquery and had issues with animation and you saved the day! Cheers – SKG Mar 12 '19 at 16:30

1

@Zeus approach was the only one that worked 100% on both! Thanks! – dNurb Apr 25 '19 at 18:05

score 61 · Answer 3 · edited Feb 04 '18 at 10:18

61

$(function() {
    $('.nav a').on('click', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $('.navbar-toggle').trigger( "click" );
        }
    });
});

edited Feb 04 '18 at 10:18

Samuel De Backer

3,404
2
26
37

answered Oct 15 '13 at 15:59

user2883298

719
5
2

6

This is a better solution, because it prevents a glitch when links are visible. – Bruno Dias Apr 08 '14 at 01:11
On Bootstrap 4, it's `.navbar-toggler` . Anyway, super working code, thanks! – Xdg Jan 06 '17 at 09:41

Vadim P. · Answer 4 · 2019-03-12T15:51:37.620

45

Better to use default collapse.js methods (V3 docs, V4 docs):

$('.nav a').click(function(){
    $('.nav-collapse').collapse('hide');
});

edited Mar 12 '19 at 15:51

answered Jun 06 '14 at 15:03

Vadim P.

515
8
13

4

Definitely better than using the click functions! It's best to keep risk to a minimum by interacting only with the things you want to change. A click event could cause additional unwanted functions to execute. Didn't know about this collapse method, thanks. – Andrew Feb 12 '15 at 15:27
1

This is the best solution I've found so far. Thank you. Just a little improvement I made : replace the `.nav a` selector by this one : `.nav a:not(.dropdown-toggle)` – mneute Apr 26 '15 at 12:51
For me, on my bootstrap 4 example page, instead of `.nav a` I had to use `.navbar a` – alexandre1985 Aug 18 '17 at 13:17
Don't you mean `.navbar-collapse` and not `.nav-collapse` ? – Volomike Mar 11 '19 at 19:43
No, I don't, because `.nav-collapse` was used in question code example. – Vadim P. Mar 12 '19 at 15:41

score 31 · Answer 5 · answered May 24 '14 at 13:43

31

Even more elegant without a lick of duplicated code, is to simply apply the data-toggle="collapse" and data-target=".nav-collapse" attributes to the nav itself:

<nav class="nav-collapse" data-toggle="collapse" data-target=".nav-collapse">
  <ul class="nav">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Super clean, no JavaScript required. Works great, so long as your your nav a elements have plenty enough padding for fat fingers, and you aren't preventing click event bubbling via e.stopPropagation() when users click on nav a items.

answered May 24 '14 at 13:43

purefusion

943
1
15
23

1

This is the proper bootstrap way of accomplishing this behaviour. – apenasVB Jul 05 '16 at 11:30
2

I would suggest modifying the target to include the _in_ class as well. This will prevent the desktop versions from behaving weirdly. `data-target=".nav-collapse.in"` – Dave Jan 19 '17 at 20:04
The nicer thing about this is it works with angular 4's routerLink whereas the other solutions don't! – dragonfly02 Oct 02 '17 at 20:36
1

In Bootstrap 4 it would be `
`
– JoshJoe Aug 28 '18 at 14:12

score 17 · Answer 6 · edited Feb 03 '16 at 15:55

17

Update your

<li>
  <a href="#about">About</a>
</li>

to

<li>
  <a data-toggle="collapse" data-target=".nav-collapse" href="#about">About</a>
</li>

This simple change worked for me.

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

edited Feb 03 '16 at 15:55

Igor Ivancha

3,413
4
30
39

answered Jul 10 '14 at 20:34

FullStackDev

1,569
1
10
7

1

This should be the accepted answer. Works perfectly with standard bootstrap conventions. – Bradley Feb 17 '15 at 03:19
1

Agreed. This is the correct way to accomplish this. No need for jQuery. I don't understand why this has gotten so little upvotes / attention. – wahwahwah Apr 14 '15 at 18:41
On a "standard" Visual Studio master page, this will result in the burger menu disappearing and no menu options. This answer only works with a specific menu configuration layout (which you do not provide as an example). – iCollect.it Ltd Sep 22 '15 at 16:54
1

This would no longer work. use `data-target=".navbar-collapse.in"` as with the new bootstrap standard. The `.in` class is to prevent the animation when on desktop – Phil Nov 14 '16 at 16:28
I've used this solution in my situation, but have used the ID of my `div.navbar-collapse` element as the `data-target` parameter. – maxathousand May 22 '17 at 21:03
This is the best solution for someone using Angular, where mixing up jquery is out of consideration – Daniel Arechiga Jun 27 '17 at 19:36
You just became today's god for me :). I just got this thing working after 3 hours of useless search on google. Pure basics. – S.K. May 31 '20 at 16:23

Charlie Dalsass · Answer 7 · 2014-07-26T03:05:34.470

13

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

});

edited Jul 26 '14 at 03:05

answered Jul 25 '14 at 17:07

Charlie Dalsass

1,986
18
23

"Elements are considered visible if they consume space in the document." Your code was meant to prevent the collapse if the navbar-collapse is not visible on the screen, but it does not. – Steve M Oct 19 '14 at 14:04
Not just that it works great, but it's also the only solution that worked for me, bootstrap > 3. – AME Oct 07 '15 at 12:30

score 13 · Answer 8 · answered May 10 '16 at 12:40

13

Tested on Bootstrap 3.3.6 - work's!

$('.nav a').click(function () {
    $('.navbar-collapse').collapse('hide');
});

answered May 10 '16 at 12:40

TheAivis

181
1
4

score 6 · Answer 9 · answered May 29 '14 at 05:56

Try this > Bootstrap 3

Brilliant exacly what I was looking for, however I had some clashes with the javascript and the bootstrap modal, this fixed it.

    $(function() {
    $('.navbar-nav').on('click', function(){ 
        if($('.navbar-header .navbar-toggle').css('display') !='none'){
            $(".navbar-header .navbar-toggle").trigger( "click" );
        }
    });
});

Hope this helps.

score 5 · Answer 10 · answered Feb 10 '15 at 10:49

5

This worked well for me. Its the same as the accepted answer but fixes the issue related to the desktop/tablet view

$('.navbar-nav a').on('click', function () {
        if (window.innerWidth <= 768) {
            $(".navbar-toggle").click();
        }
    });

answered Feb 10 '15 at 10:49

MichaelMcCabe

523
4
15
33

window.innerWidth <= 767 is better ;) or window.innerWidth < 768 – Alex Tape Mar 25 '15 at 11:49
This should be selected as a top answer. However, this doesn't work with drop downs. I fixed it by replacing selector with: $('.navbar-nav').find('a:not(".dropdown-toggle")') – Erikas Apr 30 '17 at 18:45

score 5 · Answer 11 · answered Oct 17 '16 at 06:45

5

$('.nav a').click(function () {
    $('.navbar-collapse').collapse('hide');
});

answered Oct 17 '16 at 06:45

Jagdish Singh

57
1
1

This works for me. I have a navbar on every kendo view, so I need to close them on the `beforeShow` event. – xinthose Feb 22 '17 at 17:40

score 3 · Answer 12 · edited Feb 03 '16 at 16:22

I think it's better to use default Bootstrap 3's collapse.js methods using the .navbar-collapse as the collapsible element you wish to hide as shown below.

Other solutions may cause other undesired problems with the way elements display or function in your web page. Therefore, while some solutions may appear to fix your initial problem it may very well introduce others, so make sure you run thorough testing of your site after any fix.

To see this code in action:

Press "Run This Code Snippet" below.

Press "Full Page" button.

Scale window until drop-down activates.

Then select a menu option and voila!

Cheers!

$('.nav a').click(function() {
  $('.navbar-collapse').collapse('hide');  
});

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="Franciscus Agnew">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap Navbar Collapse Function</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <header>
      <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-expanded="navbar"><span class="sr-only">Toggle navigation</span>Menu <span class="glyphicon glyphicon-chevron-down"></span></button>
            <a class="navbar-brand" href="#">Brand Logo</a>
          </div><!-- navbar-header -->
    
          <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#portfolio">Portfolio</a></li>
              <li><a href="#services">Services</a></li>
              <li><a href="#staff">Staff</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul><!-- navbar-right -->
          </div><!-- navbar-collapse -->
          
        </div><!-- container -->
      </nav><!-- navbar-fixed-top -->
    </header>
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
    
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    
    <!-- Custom Navbar Collapse Script Solution -->
    <script>
      $('.nav a').click(function() {
        $('.navbar-collapse').collapse('hide');  
      });
    </script>
  </body>
</html>

This is much better than the currently accepted answer. With that one, I get ghost animations on desktop. — Cody, Mar 16 '16 at 17:17

score 2 · Answer 13 · answered Sep 20 '16 at 12:49

On each dropdown link put data-toggle="collapse" and data-target=".nav-collapse" where nav-collapse is the name you give it to the dropdown list.

<ul class="nav" >
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#about" data-toggle="collapse" data-target=".nav-collapse">About</a></li>
      <li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse">Portfolio</a></li>
      <li><a href="#services" data-toggle="collapse" data-target="nav-collapse">Services</a></li>
      <li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse">Contact</a></li>
      <!-- dropdown -->
  </ul>

This is working perfectly on screen that have a dropdown like mobile screens, but on desktop and tablet it creates a flickr. This is because the .collapsing class is applied. To remove the flickr I created a media query and inserted overflow hidden to the collapsing class.

@media (min-width: 768px) {
.collapsing {
    overflow: inherit;
  }
}

score 2 · Answer 14 · edited Oct 09 '16 at 12:02

Adding the data-toggle="collapse" data-target=".navbar-collapse.in" to the tag <a> worked for me.

<div>

        <button type="button" class="navbar-toggle"  data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
    </div>
            <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="nav-item"><a
                    href="#" data-toggle="collapse" data-target=".navbar-collapse.in" class="nav-link" >Home
                </a></li>
            </ul>
    </div>

score 1 · Answer 15 · answered Dec 13 '14 at 00:26

Here's how I did it. If there is a smoother way, please please tell me.

Inside the <a> tags where the links for the menu are I added this code:

onclick="$('.navbar-toggle').click()"

It preserves the slide animation. So in full use it would look like this:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" ng-controller="topNavController as topNav">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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" href="home.html">My Cool Site</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active" onclick="$('.navbar-toggle').click()"><a href="home.html" onclick="$('.navbar-toggle').click()"><i class="fa fa-home"></i> Home</a></li>
            <li><a href="aboutus.html" onclick="$('.navbar-toggle').click()">About Us</a></li>
        </ul>
    </div><!--/.nav-collapse -->
</div>

score 1 · Answer 16 · answered Aug 31 '17 at 09:08

1

100% working:-

Add in HTML

<div id="myMenu" class="nav-collapse">

Javascript

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

answered Aug 31 '17 at 09:08

Chit

293
2
12

Thanks man! It works – Pushprajsinh Chudasama Nov 12 '21 at 15:46

score 0 · Answer 17 · edited Oct 23 '14 at 18:15

0

$(function() {
    $('.nav a').on('click touchstart', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $(".navbar-toggle").trigger( "click" );
        }
    });
});

// NOTE I added the "touchstart" for mobile touch. touchstart/end has no delay

edited Oct 23 '14 at 18:15

Sebsemillia

9,366
2
55
70

answered Jan 23 '14 at 19:56

APOUGHER

49
4

score 0 · Answer 18 · answered Feb 09 '15 at 15:00

This is the best solution I have used.

$(document).ready(function () {

        $('.nav a').on('click', function () {

            if ($(".btn-navbar").is(":visible") ){ $(".btn-navbar").trigger("click"); } //bootstrap 2.x
            if ($(".navbar-toggle").is(":visible")) { $(".navbar-toggle").trigger("click"); } //bootstrap 3.x
        });

    });

score 0 · Answer 19 · edited May 01 '17 at 07:34

0

$("body,.nav a").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');
  }
});

edited May 01 '17 at 07:34

Raven H.

72
10

answered Feb 10 '17 at 01:54

טאבו ישראל שרות לקוחות

78
3

Single Entity · Answer 20 · 2017-03-20T11:55:21.830

For those who have noticed desktop navbars flicker when using this solution:

$('.nav a').on('click', function(){
    $(".navbar-collapse").collapse('hide');
});

A simple solution to that problem is to reference the collapsed navbar only by checking for the presence of 'in':

$('.navbar-collapse .nav a').on('click', function(){
    if($('.navbar-collapse').hasClass('in'))
    {
        $(".navbar-collapse").collapse('hide');
    }
});

This collapses the navbar on click when the navbar is in mobile mode, but will leave alone the desktop version. This avoids the flickering many people have witnessed occurring on desktop versions.

Additionally, if you have a navbar with dropdown menus you won't be able to see these as the navbar will be hidden as soon as you click on them, so if you have dropdown menus (like I do!), use the following:

$('.nav a').on('click', function(e){
    if(!$(this).closest('li').hasClass('dropdown') & $( '.navbar-collapse').hasClass('in'))
    {
        $(".navbar-collapse").collapse('hide');
    }
});

This looks for the presence of the dropdown class above the link clicked on in the DOM, if it exists, then the link was intending to launch a drop down menu and consequently the menu isn't hidden. When you click on a link within the dropdown menu, the navbar will hide correctly.

Remzi Cavdar · Answer 21 · 2023-03-22T03:12:27.820

Bootstrap 5.3 - update 2023

The following works with Bootstrap 5.2 and up:

<div class="collapse navbar-collapse" id="main-menu-navbar">
    <ul class="navbar-nav me-auto my-2 my-lg-0">
        <li class="nav-item">
            <a class="nav-link d-lg-none" href="/">
            <span data-bs-toggle="collapse" data-bs-target="#main-menu-navbar">Home</span>
            </a>
            <a class="nav-link d-none d-lg-block" href="/">Home</a>
        </li>
    </ul>
</div>

2 links in a nav-item

I used 2 links, because if you use data-bs-toggle="collapse" data-bs-target="#main-menu-navbar" your menu will "flash/reload" on desktop too, so the first link will hide on lg and wider screens and the second link will do the opposite, hide on screens smaller than lg

score -1 · Answer 22 · answered Oct 09 '13 at 22:23

This hides nav collapse instead of animating it but same concept as above answer

JS:

$('.nav a').on('click', function () {
    $("#funk").toggleClass('in collapse');
});

HTML:

<div class="navbar-collapse" id="funk">

I prefer this on single page sites because I use localScroll.js that already animates.

Robert · Answer 23 · 2014-03-22T10:19:14.363

Mobile view: how to hide toggle navigation in bootstrap + dropdown + jquery + scrollto with navigation items that points to anchors/ids on the same page, one page template

The issue I was experimenting with any of the above solutions was that they are collapsing only the submenu items, while the navigation menu doesn't collapse.

So I did my thought.. and what can we observe? Well, every time we/the users click an scrollto link, we want the page to scroll to that position and contemporaneously, collapse the menu to restore the page view.

Well... why not to assign this job to the scrollto functions? Easy :-)

So in the two codes

// scroll to top action
$('.scroll-top').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop:0}, 'slow');

and

// scroll function
function scrollToID(id, speed){
var offSet = 67;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
    $('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
    mainNav.css("height", "1px").removeClass("in").addClass("collapse");
    mainNav.removeClass("open");
}

I've just added the same command in both the functions

    if($('.navbar-toggle').css('display') !='none'){
    $(".navbar-toggle").trigger( "click" );
}

(kudos to one of the above contributors)

like this (the same should be added to both the scrolls)

$('.scroll-top').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop:0}, 'slow');
if($('.navbar-toggle').css('display') !='none'){
    $(".navbar-toggle").trigger( "click" );
}
});

if you wanna see it in action just check it out recupero dati da NAS

score -1 · Answer 24 · answered Jan 08 '15 at 13:00

Bootstrap3 users try the given below code. It worked for me.

function close_toggle() {
   if ($(window).width() <= 768) {
      $('.nav a').on('click', function(){
          $(".navbar-toggle").click();
      });
   }
   else {
     $('.nav a').off('click');
   }
}
close_toggle();

$(window).resize(close_toggle);

score -1 · Answer 25 · edited Aug 20 '16 at 01:08

Add an id then to each

<li> add data-target="myMenu" data-toggle="collapse"
<div id="myMenu" class="nav-collapse">
    <ul class="nav">
      <li class="active" data-target="myMenu" data-toggle="collapse"><a href="#home">Home</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#about">About</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#portfolio">Portfolio</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#services">Services</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#contact">Contact</a></li>
    </ul>
</div>

Cristi Draghici · Answer 26 · 2016-12-21T09:32:10.627

Another quick solution for Bootstrap 3.* could be:

$( document ).ready(function() {
    //
    // Hide collapsed menu on click
    //
    $('.nav a').each(function (idx, obj) {
        var selected = $(obj);

        selected.on('click', function() {
            if (selected.closest('.collapse.in').length > 0) {
                $('.navbar-toggle').click(); //bootstrap 3.x by Richard
            }
        });
    });
});

score -1 · Answer 27 · edited May 23 '17 at 12:34

I posted a solution that works with Aurelia here: https://stackoverflow.com/a/41465905/6466378

The problem is you can not just add data-toggle="collapse" and data-target="#navbar" to your a elements. And jQuery does not work wenn 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);
      }
    }
  }
}

score -1 · Answer 28 · answered Mar 17 '17 at 05:42

-1

I checked in menu is opened by checking 'in' class and then run the code.

$('.navbar-collapse a').on('click', function(){
    if ( $( '.navbar-collapse' ).hasClass('in') ) {
        $('.navbar-toggle').click();
    }
});

works perfectly.

answered Mar 17 '17 at 05:42

Aamer Shahzad

2,617
1
27
25

score -1 · Answer 29 · answered May 03 '18 at 23:15

I'm on Bootstrap 4, using fullPage.js with a fixed top nav, and tried everything listed here, with mixed results.

Tried the best, clean way :
```
data-toggle="collapse" data-target=".navbar-collapse.show"
```
The menu would collapse, but the href links wouldn't lead anywhere.
Tried the logical other ways :
```
$('myClickableElements').on('click touchstart', function(){
  $(".navbar-collapse.show").collapse('hide');
  // or
  $(".navbar-collapse.show").collapse('toggle');
  // or
  $('.navbar-toggler').click()
});
```
There would be some weird behavior because of the touchstart event : the clicked buttons would end up not be the ones I actually clicked, hence breaking the links. Plus it would add the .show class to some other unrelated dropdowns in my nav, causing some more weird stuff.
Tried to change div to li
Tried to e.preventDefault() and e.stopPropagation()
Tried and tried more

Nothing would work.

So, instead, I had the (so far) marvelous idea of doing that :

$(window).on('hashchange',function(){
   $(".navbar-collapse.show").collapse('hide');
});

I already had stuff in that hashchange function, si I just had to add this line.

It actually does exactly what I want : collapsing the menu when the hash changes (i.e. a click leading somewhere else has occurred). Which is good, cause I can now have links in my menu that won't collapse it.

Who knows, maybe this will help someone in my situation!

And thanks to everyone who has participated in that thread, lots of info to be learned here.

score -1 · Answer 30 · answered Feb 08 '19 at 23:18

-1

In most cases you will only want to call the toggle function if the toggle button is visible...

if ($('.navbar-toggler').is(":visible")) $('.navbar-toggler').click();

answered Feb 08 '19 at 23:18

EddieB

4,991
3
23
18

score -1 · Answer 31 · answered Feb 09 '21 at 19:37

If you have scrolling problems after using the jQuery solution described above, e.g.

$('.navbar-collapse').collapse('toggle');

then this is caused by Bootstrap adding the CSS class overlay-active in the parent element. This can even go up to your body element.

To solve this you have to remove this class:

<script type="text/javascript">
    $(document).ready(function(){

        $('.nav-item').click(function(){
            $('.overlay-active').removeClass('overlay-active');
        });

    });
</script>

Hide Twitter Bootstrap nav collapse on click

31 Answers31

Bootstrap 5.3 - update 2023

The following works with Bootstrap 5.2 and up:

2 links in a nav-item

Linked

Related