bootstrap 3 navbar collapse button not working

Question

I did some modification in navbar but now the toggle button is not responding on click  Below is my code  Where I am wrong     CODE      lt body gt       lt div class  navbar-wrapper  gt         lt div class  container  gt            lt div class  navbar navbar-default navbar-static-top  role  navigation  gt             lt div class  container  gt               lt div class  navbar-header  gt                 lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar collapse  gt                   lt span class  sr-only  gt Toggle navigation lt  span gt                   lt span class  icon-bar  gt  lt  span gt                       lt span class  icon-bar  gt  lt  span gt                 lt  button gt                 lt a class  navbar-brand  href    index html  gt ossoc lt  a gt               lt  div gt               lt div class  collapse navbar-collapse  gt                 lt ul class  nav navbar-nav navbar-right  gt                   lt button id  loginbutton  type  button  class  btn btn-primary narbar-btn  gt  lt i class  glyphicon glyphicon-log-in  gt  lt  i gt Login lt  button gt                   lt button type  button  class  btn btn-success navbar-btn  gt  lt i class  glyphicon glyphicon-link  gt  lt  i gt  lt a href    register jsp  gt Create account lt  a gt  lt  button gt                 lt  ul gt               lt  div gt             lt  div gt           lt  div gt          lt  div gt       lt  div gt

User · Answer

In my case the issue was due to how I build my Nav bar. I was doing it through a jQuery plugin so I can quickly build Bootstrap components through javascript.

To cut a long story short binding the data elements of the button through jQuery .data() resulted in a collapse button that didn't work, doing it via .attr() fixed the issue.

This doesn't work:

$this.addClass("navbar navbar-default")
  .append($("<div />").addClass("container-fluid")
    .append($("<div />").addClass("navbar-header")
      .append($("<button />").addClass("navbar-toggle collapsed")
        .attr("type","button")
        .attr("aria-expanded", "false")
        .data("target","#" + id)
        .data("toggle","collapse")
        .html("<span class='sr-only'>Toggle navigation</span>"
            + "<span class='icon-bar'></span>"
            + "<span class='icon-bar'></span>"
            + "<span class='icon-bar'></span>"))
        .append($("<a href='#' />").addClass("navbar-brand")
          .append(document.createTextNode(settings.label))))
    .append($("<div />").addClass("collapse navbar-collapse").attr("id",id)));

But this does (with the changes left in comments):

$this.addClass("navbar navbar-default")
  .append($("<div />").addClass("container-fluid")
    .append($("<div />").addClass("navbar-header")
      .append($("<button />").addClass("navbar-toggle collapsed")
        .attr("type","button")
        .attr("aria-expanded", "false")
        .attr("data-target", "#" + id) //.data("target","#" + id)
        .attr("data-toggle", "collapse") // .data("toggle","collapse")
        .html("<span class='sr-only'>Toggle navigation</span>"
            + "<span class='icon-bar'></span>"
            + "<span class='icon-bar'></span>"
            + "<span class='icon-bar'></span>"))
        .append($("<a href='#' />").addClass("navbar-brand")
          .append(document.createTextNode(settings.label))))
    .append($("<div />").addClass("collapse navbar-collapse").attr("id",id)));

I can only assume that this is related to the way jQuery binds .data(), it doesn't write the attributes out to the elements, but just attaches them to the jQuery object. Using the .data() version resulted in HTML:

<button class="navbar-toggle collapsed" aria-expanded="false" type="button" >

Where as the .attr() version gives:

<button class="navbar-toggle collapsed" aria-expanded="false" type="button" data-toggle="collapse" data-target="#6a2034fe-8922-4edd-920e-6bd0ea0b2caf">

It seems that Bootstrap needs the data-nnn attribute in the HTML.

User · Answer

I had a similar problem   Looked over the html several times and was sure it was correct   Then I started playing around with the order of jquery and bootstrap javascript     Originally I had bootstrap min js loading BEFORE jquery min js   In this state  the menu would not expand when clicking on the menu icon   Then I changed the order so that bootstrap min js came after jquery min js  and this solved the problem   I don t know enough about javascript to explain why this caused the problem  or fixed it   but that is what worked for me   Additional info   Both scripts are located at the bottom of the page  just before the  tag  Both scripts are hosted on CDNs  not locally hosted   If you re pretty sure your code is correct  give this a try

User · Answer

Just my 2 cents  had    lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 6 js bootstrap min js  gt  lt  script gt   at the end of body  wasn t working  had to add crossorigin  anonymous  and now it s working  Bootstrap version 3 3 6

User · Answer

In case it might help someone  I had a similar issue after adding Bootstrap 3 to my MVC 4 project  It turned out my problem was that I was referring to bootstrap-min js instead of bootstrap js in my BundleConfig cs   Didn t work   bundles Add new ScriptBundle    bundles bootstrap   Include                                 Scripts bootstrap-min js       Worked   bundles Add new ScriptBundle    bundles bootstrap   Include                             Scripts bootstrap js

User · Answer

In  lt body gt  you should have two  lt script gt  tags    lt script src  https   code jquery com jquery-2 1 3 js  gt  lt  script gt   lt script src  js bootstrap js  gt  lt  script gt    The first one will load jQuery from the CDN  and second one will load Bootstrap s Javascript from a local directory  in this case it s a directory called js

User · Answer

Well i had the same problem what when i added the following code within the  tag my problem fixed         lt head gt          lt meta name  viewport  content  width device-width   initial-scale 1    gt       lt  head gt    I hope this can help you guys

User · Answer

You need to change in this markup    lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar collapse  gt    change the   data-target   navbar collapse    to   data-target   navbar-collapse    Reason   The value of data-target is a any class name of the associated nav div  In this case it is    lt div class  collapse navbar-collapse  gt    lt -- Look at here       lt ul class  nav navbar-nav navbar-right  gt              lt  div gt    Js Fiddle Demo

User · Answer

It happened with me  I used jquery min js file that downloaded from bootstrap site it is not working  I tried same page with other jquery min js file it worked fine so if you face this problem try to reference other jquery min js file in your page and try again

[jquery] bootstrap 3 navbar collapse button not working

Examples related to jquery

Examples related to html

Examples related to css

Examples related to twitter-bootstrap