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

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

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

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

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

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

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     lt div   gt    addClass  container-fluid        append     lt div   gt    addClass  navbar-header          append     lt button   gt    addClass  navbar-toggle collapsed            attr  type   button            attr  aria-expanded    false            data  target        id           data  toggle   collapse            html   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 span class  icon-bar  gt  lt  span gt              append     lt a href       gt    addClass  navbar-brand              append document createTextNode settings label          append     lt div   gt    addClass  collapse navbar-collapse   attr  id  id       But this does  with the changes left in comments     this addClass  navbar navbar-default      append     lt div   gt    addClass  container-fluid        append     lt div   gt    addClass  navbar-header          append     lt button   gt    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   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 span class  icon-bar  gt  lt  span gt              append     lt a href       gt    addClass  navbar-brand              append document createTextNode settings label          append     lt div   gt    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    lt button class  navbar-toggle collapsed  aria-expanded  false  type  button   gt    Where as the  attr   version gives    lt button class  navbar-toggle collapsed  aria-expanded  false  type  button  data-toggle  collapse  data-target   6a2034fe-8922-4edd-920e-6bd0ea0b2caf  gt    It seems that Bootstrap needs the data-nnn attribute in the HTML

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

[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