Bootstrap Navbar toggle button not working

Question

When I shrink the window and click the button it doesn t work  Button doesn t respond  What seems to be the problem here could anyone tell me please    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 span class  icon-bar  gt  lt  span gt   lt  button gt    lt div class  collapse navbar-collapse  gt       lt ul class  nav navbar-nav  gt           lt li gt               lt a href    gt Page 1 lt  a gt           lt  li gt           lt li gt               lt a href    gt Page 2 lt  a gt           lt  li gt           lt li gt               lt a href    gt Page 3 lt  a gt           lt  li gt       lt  ul gt    Libraries are jQuery 2 1 3 and bootstrap 3 3 1

User · Accepted Answer

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    lt div class  navbar-wrapper  gt         lt div class  container  gt            lt nav class  navbar navbar-inverse navbar-static-top  gt             lt div class  container  gt               lt div class  navbar-header  gt                 lt button type  button  class  navbar-toggle collapsed  data-toggle  collapse  data-target   navbar  aria-expanded  false  aria-controls  navbar  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 span class  icon-bar  gt  lt  span gt                 lt  button gt                 lt a class  navbar-brand  href     gt Project name lt  a gt               lt  div gt               lt div id  navbar  class  navbar-collapse collapse  gt                 lt ul class  nav navbar-nav  gt                       lt li gt  lt a href    gt Page 1 lt  a gt                       lt  li gt                       lt li gt  lt a href    gt Page 2 lt  a gt                       lt  li gt                       lt li gt  lt a href    gt Page 3 lt  a gt                       lt  li gt                  lt  ul gt               lt  div gt             lt  div gt           lt  nav gt          lt  div gt       lt  div gt

User · Answer

If you will change the ID then Toggle will not working same problem was with me i just change   lt div class  collapse navbar-collapse  id  defaultNavbar1  gt       lt ul class  nav navbar-nav  gt    id  defaultNavbar1  then toggle is working

User · Answer

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   lt meta name  quot viewport quot  content  quot width device-width  initial-scale 1 quot  gt

User · Answer

Remember load jquery before bootstrap js

User · Answer

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    lt html gt      lt head gt            stylesheets here         lt link rel  quot stylesheet quot  href  quot  quot   gt       lt  head gt      lt body gt          your html code here           js scripts here          note jquery tag has to go before boostrap        lt script src  quot https   code jquery com jquery-2 1 3 min js quot  gt  lt  script gt         lt script src  quot http   maxcdn bootstrapcdn com bootstrap 3 3 1 js bootstrap min js quot  gt  lt  script gt      lt  body gt   lt  html gt

User · Answer

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   lt script src  quot https   code jquery com jquery-3 5 1 slim min js quot  integrity  quot sha384-DfXdz2htPH0lsSSs5nCTpuj zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj quot  crossorigin  quot anonymous quot  gt  lt  script gt    lt script src  quot https   cdn jsdelivr net npm bootstrap 4 5 3 dist js bootstrap bundle min js quot  integrity  quot sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ JpcUGGOn Y7RsweNrtN tE3MoK7ZeZDyx quot  crossorigin  quot anonymous quot  gt  lt  script gt

[twitter-bootstrap] Bootstrap Navbar toggle button not working

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3