Bootstrap Navbar toggle button not working

Question

When I shrink the window and click the button it doesn't respond. How do I fix this?

<button type="button" 
        class="navbar-toggle" 
        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>

<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        <li>
            <a href="">Page 1</a>
        </li>
        <li>
            <a href="">Page 2</a>
        </li>
        <li>
            <a href="">Page 3</a>
        </li>
    </ul>

Libraries are jQuery 2.1.3 and bootstrap 3.3.1.

are you including the Bootstrap javascript file? Also make sure it's included at the bottom of your page. — HaukurHaf, Jan 13 '15 at 19:39
can we see the html that includes the js files in your html? — indubitablee, Jan 13 '15 at 19:42
it's not enough to include the scripts, the *have* to be at the bottom of your page for the toggle to work. — HaukurHaf, Jan 13 '15 at 19:43
My Website this is all I have included it is just a simple, code nothing special — Nikasv, Jan 13 '15 at 19:44
wheres the js script tags? according to your previous comment, you just put style sheets twice on the html — indubitablee, Jan 13 '15 at 19:50
There are no js files or codes in there I am just trying to see how navbar button works and how it toggles. But after resizing it the button isn't working, there is no reaction. — Nikasv, Jan 13 '15 at 19:52
If you don't have the `.js` files, it's **NOT** going to work. — Tim Lewis, Jan 13 '15 at 19:55
**@HaukurHaf** - Please post as answer. It worked great for me. **Thanks!** — Web Developer, Mar 24 '21 at 14:12
btw the class should be "navbar-toggler" instead of "navbar-toggle"... at least in bootstrap 5 — Alexandros Kourtis, Aug 29 '22 at 01:08

Crasher · Answer 1 · 2021-07-20T22:19:19.260

62

In Bootstrap 5 data attributes are now namespaced in the js plugin with "bs", so for example data-toggle will not work anymore and you will need to use data-bs-toggle instead.

edited Jul 20 '21 at 22:19

answered Jun 18 '21 at 15:52

Crasher

2,211
2
18
17

Life saver :) Thanks – SachinKRaj Aug 27 '21 at 11:33
Yes, this was my problem. I switched back from version 5.0 to 4.6 and it started working fine. – Kara Kartal Sep 05 '21 at 18:19
Finally, after 2 days, I am able to fix it. Thanks. – Pratap Singh Sep 24 '21 at 03:48
Ohh man, thank you :) This works now for me as well. – Zsombi Oct 28 '21 at 18:19
2

Since Bootstrap 5, this should be shown as the first answer. Thanks! – MikhailRatner Nov 09 '21 at 18:04
This fixed it for me when migrating to BS 5! Too easy to miss... – Erik Feb 12 '22 at 12:01
This solution worked for me. This should be included in the Bootstrap tutorial right? – Jake Mulhern Mar 14 '22 at 23:56
seriously this is a life saver.. thanks so much!! :D – Samra Nov 09 '22 at 01:36

score 51 · Answer 2 · edited Jan 08 '21 at 08:14

51

Demo: http://jsfiddle.net/u1s62Lj8/1/

You need the jQuery and Boostrap Javascript files included in your HTML page for the toggle to work. (Make sure you include jQuery before Bootstrap.)

<html>
   <head>
       // stylesheets here
       <link rel="stylesheet" href=""/> 
   </head>
   <body>
      //your html code here

      // js scripts here
      // note jquery tag has to go before boostrap
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
   </body>
</html>

edited Jan 08 '21 at 08:14

nightblade9

354
2
15

answered Jan 13 '15 at 19:55

indubitablee

8,136
2
25
49

3

Posting for a friend. Don't forget to make sure you've not disabled javascript in dev tools the other day like, err, my friend, did. Close dev tools and see if it works! d'oh! – billythekid Apr 18 '16 at 13:26
1

I had a master page and the reference of jquery libs were included in child pages but not in the master page. Your answered helped me finding the problem, Thank you! – Jamshaid K. Oct 03 '17 at 12:57
this didnt work – AlThePal78 Oct 13 '22 at 18:17

score 36 · Accepted Answer · answered Jan 13 '15 at 20:15

Your code looks great, the only thing i see is that you did not include the collapsed class in your button selector. http://www.bootply.com/cpHugxg2f8 Note: Requires JavaScript plugin If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.

The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

<div class="navbar-wrapper">
      <div class="container">

        <nav class="navbar navbar-inverse navbar-static-top">
          <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="#">Project name</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                    <li><a href="">Page 1</a>
                    </li>
                    <li><a href="">Page 2</a>
                    </li>
                    <li><a href="">Page 3</a>
                    </li>

              </ul>
            </div>
          </div>
        </nav>

      </div>
    </div>

score 31 · Answer 4 · answered Nov 04 '21 at 19:47

31

In Bootstrap 5, change data-toggle to data-bs-toggle , and data-target to data-bs-target.

Notice that bs has been added to the data attributes in this release.

answered Nov 04 '21 at 19:47

Spidy

556
5
11

score 9 · Answer 5 · answered May 20 '19 at 16:31

9

Remember load jquery before bootstrap js

answered May 20 '19 at 16:31

Alberto

1,099
9
8

score 3 · Answer 6 · answered Jul 02 '20 at 22:00

Wasted several hours only to realize that viewport meta was missing from my code. Adding here just in case some one else misses it out.

As soon as I added this, the toggle started working fine.

<meta name="viewport" content="width=device-width, initial-scale=1">

baraa yusri · Answer 7 · 2020-11-28T22:38:08.110

because u have to have jquery set-up to enable the toggling functionality of the toggler button. So, all u have to do is to add bootstrap.bundle.js before bootstrap.css:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

score 2 · Answer 8 · answered Aug 28 '21 at 15:57

2

don't load twice jquery & bootstrap libraries.

after removing duplicates, works fine.

answered Aug 28 '21 at 15:57

Brian Sanchez

832
1
13
11

score 0 · Answer 9 · answered May 29 '21 at 14:34

0

I had the same problem.

I had added jQuery and bootstrap in the incorrect order in my header files.

I had to load jQuery BEFORE bootstrap and this solved the issue.

answered May 29 '21 at 14:34

Jason Braithwaite

119
1
2

score -2 · Answer 10 · answered Sep 09 '15 at 22:07

-2

If you will change the ID then Toggle will not working same problem was with me i just change

<div class="collapse navbar-collapse" id="defaultNavbar1">
    <ul class="nav navbar-nav">

id="defaultNavbar1" then toggle is working

answered Sep 09 '15 at 22:07

Syntaxx Errorr

21
1
3

He was kinda right... if you change the ID, you'll need to change also `data-target=` in the button. I had removed the ID thinking it was useless... – the_nuts Oct 17 '20 at 21:03

Bootstrap Navbar toggle button not working

10 Answers10

Linked