CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
kaifresh
kaifresh

Reputation: 127

Bootstrap collapsed navbar not expanding

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...

Upvotes: 9

Views: 37413

Answers (9)

NTDLS
NTDLS

Reputation: 4862

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.

Upvotes: 1

Noob
Noob

Reputation: 1

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.

Upvotes: 0

Ron Rebennack
Ron Rebennack

Reputation: 2824

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

Upvotes: 12

gharel
gharel

Reputation: 573

I was using [email protected] instead of 4.6.0, as in my tutorial. Guess things have changed in the new version.

Upvotes: 0

Ravi Kumar Mylavarapu
Ravi Kumar Mylavarapu

Reputation: 1

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

Upvotes: 0

only4
only4

Reputation: 139

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>

Upvotes: 0

TheTechGuy
TheTechGuy

Reputation: 17354

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.

Upvotes: 0

nasirkhan
nasirkhan

Reputation: 10553

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.

Upvotes: 8

Sherman Szeto
Sherman Szeto

Reputation: 2405

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.

Upvotes: 10

Related Questions