CODEWITHSUNDEEP
twitter-bootstrap-3
id11
id11

Reputation: 31

Bootstrap 3 collapse menu not working (common issue)

I have a problem with the menu for small width screens, ie, once it collapses. Nothing comes up when I click the "burger" symbol. I've looked at most of the posts relating to this but cannot find a solution. From changing HTML, to adding CSS, to calling up a different jquery script. I am using "bootstrap-3.3.1" framework and "jquery/1.11.2" script. The code for navbar and scripts is shown:

<nav class="navbar navbar-default navbar-fixed-top normal" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-logo" href="#"><img class="img-responsive" src="img/logo.svg"></a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="index.html">Home</a></li>
        <li><a href="services.html">Services</a></li>
        <li class="active"><a href="photos.html">Photos</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>


<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>

Upvotes: 0

Views: 786

Answers (2)

id11
id11

Reputation: 31

The reason was because my reference to "bootstrap.min" was incorrect. It should have been:

 <script src="js/bootstrap.min.js"></script>

Or if using links (in this case version 3.3.5):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

Upvotes: 1

SuryaKant Nayak
SuryaKant Nayak

Reputation: 1

To solve your issue you need to do the following :-

Add the Jquery having version 2.1.4 , because to work with latest Bootstrap version 3.3.1 you must need to use above Jquery latest Version.

Hope after adding this jquery version your problem get solved.

Get this Jquery version from hear :- Jquery2.1.4

Upvotes: 0

Related Questions