Bootstrap collapsed navbar not expanding

Question

I'm new to Bootstrap and just trying to get the collapsed dropdown nav bar to behave. It resizes perfectly, all the way up to the point that the window is so small that it triggers all the nav bar items being removed and placed inside the little data-toggle button. Because when I click that lil' data-toggle button, it does not expand and show the items in a drop down list like its supposed to.

<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've used this identical code on all pages, however 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 beneath the <nav> tags there is another div of content containing the main text for that page & an image. That said, when I delete the entire code for this div from my page, the problem persists so I don't think its that....

I may also be (over)using redundant classes, but thats a story for later...

Answer 1

Most of the time, its because jQuery isn't linked to the page correctly. Or bootstrap.js is referenced before jQuery.js. Make sure you have those linked correctly.

Answer 2

I used the same code and it is working perfectly, check at http://jsbin.com/henume/2/edit?html,output

You mentioned that it resizes properly, so i assume that the bootstrap.css is working. Please make sure the jQuery.js and boostrap.js are included in the page.

Answer 3

With >5 you have to use "data-bs-target" instead of "data-target" for the button.

This:

  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

Instead of:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

Answer 4

As nasirkhan mentioned, the code is working perfectly on live domain. At times this issue can be caused by just the local domain name as was in my case and the same code was renderering fine on live site.

Answer 5

I had the same problem, confirm that you are including these two files. First one is for Bootstrap(css) and second one is for Bootstrap(javascript). In my case included the css one correctly but you know what I did at the time of including second one I included is as a stylesheet but it's 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 6

Addition of 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">

Answer 7

I was using bootstrap@5.0.2 instead of 4.6.0, as in my tutorial. Guess things have changed in the new version.

Answer 8

I am using Bootstrap 5.1 and had the same issue. It only happens if you do not have the reference to the bootstrap.js file before the end of the body tag.

Answer 9

Changing data-toggle to data-bs-toggle and data-target to data-bs-target fixed it for me. CSS caching is a mystery sometimes leaving me to wonder when I made the breaking change. Hope this helps.