Bootstrap close responsive menu "on click"

Question

On "PRODUCTS" click I slide up a white div (as seen in attached). When in responsive (mobile and tablet), I would like to automaticly close the responsive navbar and only show the white bar.

I tried:

$('.btn-navbar').click();

also tried:

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

And it does work. However in desktop size, it is also called and does something funky to the menu where it shrinks for a second.

Any ideas?

enter image description here

Could you post some HTML? Also are you using Bootstrap for the hide functionality? Or are you trying to implement something of your own? — khollenbeck, Jan 07 '13 at 22:21
I'm just trying to do something simple, I think. I just want to close the navbar when I click on "PRODUCTS" — user1040259, Jan 08 '13 at 03:40
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:13
I recomend scrolling a bit down here and look @LukeTillman answer. Works perfectly and without jQuery. :) — das Keks, Aug 31 '16 at 08:11

score 144 · Answer 1 · edited Jan 04 '22 at 19:08

144

You don't have to add any extra javascript to what's already included with bootstraps collapse option. Instead simply include data-toggle and data-target selectors on your menu list items just as you do with your navbar-toggle button. So for your Products menu item it would look like this

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

Then you would need to repeat the data-toggle and data-target selectors for each menu item

EDIT!!! In order to fix overflow issues and flickering on this fix I'm adding some more code that will fix this and still not have any extra javascript. Here is the new code:

<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

Here it is at work http://jsfiddle.net/jaketaylor/84mqazgq/

This will make your toggle and target selectors specific to screen size and eliminate glitches on the larger menu. If anyone is still having issues with glitches please let me know and I'll find a fix. Thanks

EDIT: In the bootstrap v4.1.3 & v5.0 I couldnt use visible/hidden classes. Instead of hidden-xs use d-none d-sm-block and instead of visible-xs use d-block d-sm-none.

EDIT: In bootstrap v5, Instead of data-toggle use data-bs-toggle and instead of data-target use data-bs-target.

edited Jan 04 '22 at 19:08

Mayur Narkhede

43
9

answered Feb 13 '14 at 02:29

Jake Taylor

4,246
3
15
16

14

that causes flickering and weird stuff when the nav is not displayed as the "responsive" menu. – Florian Apr 15 '14 at 23:09
i removed my downvote on this answer and my previous comment (also since the video was not working anymore). since my comment about flickering is still valid for the original answer, got a few upvotes and your "edit" is clearly marked i don't see a reason to remove it and rewrite history. it was valid at the time and you reacted accordingly. people reading your answer will see the "edit" and know you improved on it... – Florian Apr 13 '15 at 13:43
You prefer duplicating all your links just to avoid a single line of perfectly documented javascript? http://getbootstrap.com/javascript/#collapse-methods. – Sander Garretsen Jan 14 '16 at 23:06
@Sander Garretsen Is this a real question? All you did was reference to bootstrap's js collapse methods. Did you have an answer for the original question? If so you can post it at the bottom of the page :) – Jake Taylor Jan 15 '16 at 03:13
This is really good solution, but duplicating navigational links is not a good idea. For me the version before edition and enhanced by @luketillman worked fine and gives pretty clean and logical markup + no additional js needed. – TMMC May 31 '16 at 16:49
the trick visible-xs is not necessary. just replace .navbar-collapse by .navbar-collapse.in and it works fine on mobile and desktop – amdev Sep 15 '16 at 08:30
@TMMC & amdev The problem with the .in class being added is that for some reason it causes issues with several other plugins such as scrollspy and supermenu. If you don't plan on using any extensions/plugins outside of bootstrap then this method is fine. Also, if duplicating navigational links was such a bad idea then I doubt sites like paypal would be doing it...which they are :) I'd love to see your documentation on why it's a bad idea. – Jake Taylor Sep 15 '16 at 21:57
@jake-taylor, well I do not mean to argue, the simplest answer is 'because it is', the more complex one is because it is illogical and misleading for those who use screen readers - no documentation is needed for it I hope :) BTW sites like Paypal doesn't really give a **** about anything but money ;) – TMMC Sep 20 '16 at 06:28
@TMMC So obviously the developers of Paypal aren't nearly as knowledgeable as you ;) – Jake Taylor Sep 20 '16 at 06:34
@jake-taylor, I would rather say - they do not care ;) – TMMC Sep 22 '16 at 12:53
2

Instead of adding the `data-toggle` and `data-target` attributes to every li element you can instead add it to the parent `ul` or `div` tags. – Jeremy Aug 07 '18 at 16:55
1

@jrquick This is true..but much like my original answer, you still get the glitches on larger screen sizes when clicking on links with this method. If you've found a way to eliminate this, then post a fiddle and I'll update my answer accordingly. – Jake Taylor Nov 10 '18 at 16:40
This is causing flickering in desktop screens. – Anupam Dec 23 '20 at 07:20
Using this on Blazor WASM it does collapse the menu but does not navigate anymore. – javirs Mar 30 '23 at 09:55

score 103 · Accepted Answer · edited Feb 15 '17 at 04:47

103

I've got it to work with animation!

Menu in html:

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
 </div>

Binding click event on all a elements in navigation to collapse menu (Bootstrap collapse plugin):

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

EDIT To make it more generic we can use following code snippet

 $(function(){ 
     var navMain = $(".navbar-collapse"); // avoid dependency on #id
     // "a:not([data-toggle])" - to avoid issues caused
     // when you have dropdown inside navbar
     navMain.on("click", "a:not([data-toggle])", null, function () {
         navMain.collapse('hide');
     });
 });

edited Feb 15 '17 at 04:47

Vivek Athalye

2,974
2
23
32

answered Jun 26 '13 at 10:09

mollwe

2,185
2
18
17

3

If not all `a` elements: you just need is to call `$("#nav-main").collapse('hide');` – Ankit Jain Jan 23 '14 at 06:45
@mollwe Do you have a solution for when it has a dropdown menu? I made a jsfiddle to try but even the menu won't open. http://jsfiddle.net/Y3H92/ – clankill3r Aug 04 '14 at 23:57
@clankill3r there seems to me that a reference to bootstrap.js is missing and therefore the menu won't work. I updated your jsfiddle: http://jsfiddle.net/Y3H92/1/ – mollwe Aug 12 '14 at 12:01
@mollwe with your fiddle the menu won't close at all for me. – clankill3r Aug 13 '14 at 13:33
1

Sorry for late response @clankill3r! But better late than never. http://jsfiddle.net/mollwe/Y3H92/5/ – mollwe Nov 18 '14 at 16:29
@mollwe It causes issue if you have dropdown inside navbar. To avoid that we need to use `navMain.on("click", "a:not([data-toggle])", null, function () {`. This way the click handler will execute only on links that don't have `data-toggle` attribute i.e. links that are not dropdowns. Also to make it generic its better to use `var navMain = $(".navbar-collapse");`. I'm updating the answer accordingly (hope you don't mind). – Vivek Athalye Feb 15 '17 at 03:25
you don't need `null` argument in `on("click", "a", null,` – Binar Web May 09 '18 at 14:33

score 41 · Answer 3 · edited Jun 29 '14 at 08:04

41

I think you are all over engineering..

    $('.navbar-collapse ul li a').click(function(){ 
            $('.navbar-toggle:visible').click();
    });

EDIT: To take care of sub menus, make sure their toggle anchor has the dropdown-toggle class on it.

    $(function () { 
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { 
                    $('.navbar-toggle:visible').click(); 
            }); 
    });

EDIT 2: Add support for phone touch.

    $(function () {
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
                    $('.navbar-toggle:visible').click();
            });
    });

edited Jun 29 '14 at 08:04

John Powell

12,253
6
59
67

answered Apr 19 '14 at 14:59

Hontoni

1,332
1
16
27

3

Should be the accepted answer. The others _are_ over-engineered and flicker on the non-responsive display. – rybo111 May 19 '14 at 14:52
3

This could be the accepted answer but it doesn't take into account sub menus and in fact breaks them. Some of the other "over engineered" solutions did take this into account, despite their short-comings. The following addition would take care of this: $(function () { $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { $('.navbar-toggle:visible').click(); }); }); – Ed Bishop Jun 29 '14 at 07:41
1

I think touchstart is a bit to much, click works fine. how does it respond to sliding when you "start" from the button? – Hontoni Jun 29 '14 at 14:09
This was perfect, thank you! I've made it into a pure vanilla js function which I added to the the click event. `const closeMenu=e=>{if(document.getElementById(e).classList.contains("show")){document.getElementsByClassName("navbar-toggler")[0].click()}}; ` – Lars Schellhas Nov 07 '21 at 23:43

score 40 · Answer 4 · answered Sep 20 '14 at 23:36

40

I really liked Jake Taylor's idea of doing it without additional JavaScript and taking advantage of Bootstrap's collapse toggle. I found you can fix the "flickering" issue present when the menu isn't in collapsed mode by modifying the data-target selector slightly to include the in class. So it looks like this:

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

I didn't test it with nested dropdowns/menus, so YMMV.

answered Sep 20 '14 at 23:36

Luke Tillman

1,365
11
8

3

This was the best implementation for me as well. – huijing Sep 04 '15 at 10:27
For some reason my ScrollSpy breaks with this method, but works fine with Jake Taylor's method. – Inkling Dec 20 '15 at 10:23
The best and simplest answer so far. – Diaa Jan 05 '17 at 16:50
Been trying to get a non-flicker collapse to work for a while, but this is by far the most simple and elegant solution. Thank you! – McVenco Jun 17 '17 at 18:49

score 10 · Answer 5 · answered Aug 22 '17 at 13:15

10

just to be complete, in Bootstrap 4.0.0-beta using .show worked for me...

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

answered Aug 22 '17 at 13:15

vidriduch

4,753
8
41
63

Douglas 'DK' Knudsen · Answer 6 · 2013-06-21T19:43:26.543

6

I'm assuming you have a line like this defining the nav area, based on Bootstrap examples and all

<div class="nav-collapse collapse" >

Simply add the properties as such, like on the MENU button

<div class="nav-collapse collapse" data-toggle="collapse"  data-target=".nav-collapse">

I've added to <body> as well, worked. Can't say I've profiled it or anything, but seems a treat to me...until you click on a random spot of the UI to open the menu, so not so good that.

DK

edited Jun 21 '13 at 19:43

answered Jun 21 '13 at 19:37

Douglas 'DK' Knudsen

91
1
4

Proper solution relying on Bootstrap's built-in functionality; no additional jQuery or javascript. And the simplest solution of all. This should be the accepted answer. – Sergi Papaseit May 25 '20 at 08:55

user1040259 · Answer 7 · 2013-01-08T03:30:09.670

4

This works, but does not animate.

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');

edited Jan 08 '13 at 03:30

answered Jan 07 '13 at 22:27

user1040259

6,369
13
44
62

8

It's a bit surprising that there is not a config option for this as close on click would be a better default. – bchesley Mar 09 '13 at 20:30

score 3 · Answer 8 · answered Apr 20 '15 at 18:12

3

In the HTML I added a class of nav-link to the a tag of each navigation link.

$('.nav-link').click(
    function () {
        $('.navbar-collapse').removeClass('in');
    }
);

answered Apr 20 '15 at 18:12

Jason Swingen

31
2

score 3 · Answer 9 · answered Dec 12 '15 at 14:28

3

this solution have a fine work, on desktop and mobile.

<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse"  data-target=".navbar-collapse collapse">

answered Dec 12 '15 at 14:28

bp002

131
1

worked for me when using the navbar-id as data-target:
but gives an ugly animation while in desktop-size
– wutzebaer Jan 02 '16 at 16:50

score 2 · Answer 10 · answered Jun 20 '13 at 13:15

Just to spell out user1040259's solution, add this code to your $(document).ready(function() {});

    $('.nav').click( function() {
        $('.btn-navbar').addClass('collapsed');
        $('.nav-collapse').removeClass('in').css('height', '0');
    });

As they mention, this doesn't animate the move... but it does close the nav bar on item selection

score 2 · Answer 11 · answered Nov 20 '13 at 17:38

For those using AngularJS and Angular UI Router with this, here is my solution (using mollwe's toggle). Where ".navbar-main-collapse" is my "data-target".

Create directive:

module.directive('navbarMainCollapse', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'C',
        link: function (scope, element) {
            //watch for state/route change (Angular UI Router specific)
            $rootScope.$on('$stateChangeSuccess', function () {
                if (!element.hasClass('collapse')) {
                    element.collapse('hide');
                }
            });
        }
    };
}]);

Use Directive:

<div class="collapse navbar-collapse navbar-main-collapse">
    <your menu>

Looks like you put the directive in the class attr, is that right? — Gringo Suave, Sep 11 '15 at 06:36
Inside the link function the following should work. element.on('click', function () { scope.vm.isCollapsed = !scope.vm.isCollapsed; }); — Jimmy, Jan 07 '16 at 15:20

Jussi Järviö · Answer 12 · 2015-08-26T18:32:12.273

2

This should do the trick.

Requires bootstrap.js.

Example => http://getbootstrap.com/javascript/#collapse

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

This does the same thing as adding 'data-toggle="collapse"' and 'href="yournavigationID"' attributes to navigation menus tags.

edited Aug 26 '15 at 18:32

answered Aug 25 '15 at 17:49

Jussi Järviö

21
5

Could you explain the answer in a bit more detail? – Blunderfest Aug 25 '15 at 18:04
Isn't that jQuery? Isn't it generally bad practice to use both jQuery and Angular? – AlxVallejo Feb 04 '16 at 15:56

Arco Voltaico · Answer 13 · 2013-09-08T07:49:45.617

I'm using the mollwe function, although I added 2 improvements:

a) Avoid the dropdown closing if the link clicked is collapsed (including other links)

b) Hide the dropdown too, if you are clicking the visible web content.

jQuery.fn.exists = function() {
                  return this.length > 0;
              }

    $(function() {
                var navMain = $(".navbar-collapse");
                navMain.on("click", "a", null, function() {
                    if ($(this).attr("href") !== "#") {
                        navMain.collapse('hide');
                    }
                });

                $("#content").bind("click", function() {
                     if ($(".navbar-collapse.navbar-ex1-collapse.in").exists()) {
                        navMain.collapse('hide');
                    }
                });

            });

Ralph D. · Answer 14 · 2013-11-05T12:36:16.963

Not the newest thread but i searched for a solution for the same Problem and found one (a mix of some others).

I gave the NavButton:

<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...

an id / Identifier like:

 <button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

Not the finest "Idea" - but: Works for me! Now you can check up the visibility of your button (with jquery) like:

 var target = $('#navcop');
   if(target.is(":visible")){
   $('#navcop').click();
   }

(NOTE: This is just a Code snipped ! I used a "onclick" Event on my Nav Links! (Starting a AJAX Reguest.)

The result is: If the Button is "visible" it got "clicked" ... So: No Bug if you use the "Fullscreen view" of Bootstrap (width of over 940px).

Greetings Ralph

PS: It works fine with IE9, IE10 and Firefox 25. Didnt checked up others - But i can't see a Problem :-)

score 1 · Answer 15 · answered Jan 06 '17 at 00:38

This worked for me. I have done like, when i click on the menu button, im adding or removing the class 'in' because by adding or removing that class the toggle is working by default. 'e.stopPropagation()' is to stop the default animation by bootstrap(i guess) you can also use the 'toggleClass' in place of add or remove class.

$('#ChangeToggle').on('click', function (e) {

        if ($('.navbar-collapse').hasClass('in')) {
            $('.navbar-collapse').removeClass('in');
            e.stopPropagation();
        } else {
            $('.navbar-collapse').addClass('in');
            $('.navbar-collapse').collapse();
        }

    });

kiranvj · Answer 16 · 2018-12-15T04:25:14.307

Bootstrap 4 solution without any Javascript

Add attributes data-toggle="collapse" data-target="#navbarSupportedContent.show" to the div <div class="collapse navbar-collapse">

Make sure you provide the correct id in data-target

<div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">

.show is to avoid menu flickering in large resolutions

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

score 1 · Answer 17 · answered Sep 13 '21 at 14:29

I found an easy solution for this. Just add the toggle code of the button on the navbar links too. In the below example is the code data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02".

This will close the menu when clicked and follow the link

    <!--data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" from toggle button --> 
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
    
            <div class="collapse navbar-collapse nav-format-mobile" id="navbarTogglerDemo02">
              <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <!--https://stackoverflow.com/a/65365121/5763690-->
                <li class="nav-item">

<!--data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" from toggle button to nav item --> 
                  <a class="nav-link" aria-current="page" [routerLink]="'about'" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">About</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Services
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item" [routerLink]="'services'" fragment="why-us" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">Overview</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" [routerLink]="'services'" fragment="project" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">For companies</a></li>
                    <li><a class="dropdown-item" [routerLink]="'services'" fragment="startups" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">For Startups</a></li>
                    <li><a class="dropdown-item" [routerLink]="'/services'" fragment="ngos" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">For NGOs</a></li>
                  </ul>
                </li>
                <li class="nav-item">
<!--data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" from toggle button to nav item --> 
                  <a class="nav-link" [routerLink]="'products'" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">Products</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" [routerLink]="'career'" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">Career</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" [routerLink]="'contact'" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">Contact</a>
                </li>
              </ul>
            </div>

This works for Angular 13 and Bootstrap 5. – Raymond Brink Nov 05 '22 at 14:40 — Raymond Brink, Nov 05 '22 at 14:40

score 0 · Answer 18 · answered Jun 28 '13 at 16:01

0

You cau use

ul.nav {
    display: none;
}

This will by default close the navbar. Please let me know anybody finds this usefull

answered Jun 28 '13 at 16:01

Kris

35
2
8

2

problem is, this hides the nav when displayed "normally", not in the responsive menu. – Florian Apr 15 '14 at 23:03

score 0 · Answer 19 · answered Feb 03 '15 at 10:23

If for example your toggle-able icon is visible only for extra small devices, then you could do something like this:

$('[data-toggle="offcanvas"]').click(function () {
    $('#side-menu').toggleClass('hidden-xs');
});

Clicking [data-toggle="offcanvas"] will add bootstrap's .hidden-xs to my #side-menu which will hide the side-menu content, but will become visible again if you increase the window size.

score 0 · Answer 20 · edited Jan 25 '17 at 16:23

0

$('.navbar-toggle').trigger('click');

edited Jan 25 '17 at 16:23

bfontaine

18,169
13
73
107

answered Jan 25 '17 at 13:13

Aqib

304
3
5

I don't understand why this is not the right answer? whenever you click any of the menu link on that click event you can toggle menu which I think is the right way because I'm not changing the default behaviour of opening or closing menu. – Aqib Jan 26 '17 at 04:38

score 0 · Answer 21 · answered Mar 17 '17 at 05:48

if menu html is

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
</div>

on nav toggle 'in' class is added and removed from the toggle. check if responsive menu is opened then perform the close toggle.

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

score 0 · Answer 22 · answered Dec 03 '18 at 12:32

Tuggle Nav Close, IE browser compatible answer, without any console error. If you are using bootstrap, use this

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

score 0 · Answer 23 · answered Nov 07 '21 at 23:50

I tried the other suggestions in my Vue.js 3 app, however my vue-router router-links wouldn't work anymore.

I created a small function to click the menu toggle, if the menu had the "show" class. This worked great for me in all cases.

<template>
...
<div
    id="navbarNavigation"
    class="collapse navbar-collapse"
  >
    <ul
      class="navbar-nav me-auto mb-2 mb-lg-0"
    >
      <li class="nav-item">
        <router-link
          :to="route.url"
          class="nav-link"
          @click="closeMenu('navbarNavigation')"
        >
          My route name
        </router-link>
      </li>
    </ul>
  </div>
...
</template>

<script>
setup (props) {
    const closeMenu = (id) => {
      const menuShown = document.getElementById(id).classList.contains('show')
      if (menuShown) {
        const menuToggle = document.getElementsByClassName('navbar-toggler')[0]
        menuToggle.click()
      }
    }

    return { closeMenu }
  }
</script>

score 0 · Answer 24 · answered Feb 07 '22 at 23:36

For peeps looking for a solution concerning Vue 3 router-link with Bootstrap 5 + data-bs-attributes:

Using data-bs-attributes to toggle the nav directly on a Vue-router-link doesn't seem to work - so instead you need to wrap each of your nav-links in a parent element if not already done (an li would be the obvious choice) and apply the relevant data-bs-attributes on that element.

In short - instead of this:

<li class="nav-item">
  <router-link
    to="/galaxy"
    class="nav-link d-flex"
    data-bs-toggle="collapse"
    data-bs-target="#navbarCollapse.show"
  >
    <v-icon name="gi-galaxy" size="1" class="align-middle" scale="1.5" />
    <span class="flex-fill align-middle text-start ms-3 ms-lg-1">The Galaxy</span>
  </router-link>
</li>

Use this:

<li class="nav-item" data-bs-toggle="collapse" data-bs-target="#navbarCollapse.show">
  <router-link to="/galaxy" class="nav-link d-flex">
    <v-icon name="gi-galaxy" class="align-middle" scale="1.5" />
    <span class="flex-fill align-middle text-start ms-3 ms-lg-1">The Galaxy</span>
  </router-link>
</li>

Bootstrap close responsive menu "on click"

24 Answers24

Linked

Related