Bootstrap crashed navbar without expanding

Question

I'm new to Bootstrap and just trying to make the minimized dropdown navigation bar behave. It completely changes, up to the point that the window is so small that it brings up all the elements of the navigation panel that are deleted and placed inside the small data toggle button. Because when I click this button to switch data, it does not expand and does not display the items in the drop-down list as intended.

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header logo"> <a class="navbar-brand" href="index.html"><img src="images/nastilogowhite.png" class="img-responsive" style="margin: 0 auto;"></a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-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> <div class="collapse navbar-collapse" id="nav-collapse"> <!-- Individual Navbar elements --> <ul class="nav nav-justified nasti-nav"> <li class="active"><a href="index.html">Home</a></li> <li class="divider"></li> <li><a href="familylaw.html">Family Law</a></li> <li class="divider"></li> <li><a href="criminallaw.html">Criminal Law</a></li> <li class="divider"></li> <li><a href="conveyancing.html">Conveyancing</a></li> <li class="divider"></li> <li><a href="about.html">About</a></li> <li class="divider"></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> <!-- Container fluid--> </nav> 

I used this identical code on all pages, but for some reason it only works on the home page of this site. The only difference between the home page and other pages is that under the <nav> tags there is another content div containing the body text for this page and image. However, when I remove all the code for this div from my page, the problem persists, so I don't think it is ....

I can also (over) use redundant classes, but this is a story for later ...

Answer 1

I used the same code and it works fine, check out http://jsbin.com/henume/2/edit?html,output

You mentioned that it resizes correctly, so I assume bootstrap.css is working. Make sure jQuery.js and boostrap.js are included in the page.

Answer 2

In most cases, this is because jQuery is incorrectly linked to the page. Or bootstrap.js is referenced before jQuery.js. Make sure you have the appropriate links.

Answer 3

As Nasirhan mentioned, the code works fine in a real domain. Sometimes this problem can only be caused by a local domain name, as it was in my case, and the same code was visualized on a real site.

Answer 4

I had the same problem, confirm that you include these two files. The first is for Bootstrap (css), and the second is for Bootstrap (javascript). In my case, I included css one, but you know what I did when I included the second, which I included as stylesheet , but this is a script.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

Answer 5

Adding these three lines helped me.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">