CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
secondubly
secondubly

Reputation: 1032

Bootstrap Collapsible Menu not working

I'm having an issue getting the collapsible navigation bar to load on a page - the button appears when you shrink the screen, but when I click on it, nothing happens. The console isn't throwing me any errors, so I'm assuming there must be something wrong with my css/javascript, but I don't really know what.

If it matters, I'm linking through with the Bootstrap CDN on my page - I don't know if that requires me to include the plugins manually or not (I don't think it would but I'm not sure).

The following is my HTML and Javascript link-ins:

 <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-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>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="/">Home</a></li>
      <li><a href="#">Operation Pulse</a></li>
      <li><a href="#">Forum</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Media <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="news/">News &amp; Updates</a></li>
          <li><a href="#">Indie Pulse</a></li>
          <li><a href="#" style="text-transform: lowercase;">rec</a></li>
          <li><a href="#">Geeks and Giggles</a></li>
          <li class="divider"></li>
          <li><a href="#">Podcasts</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Info <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">About Us</a></li>
          <li><a href="#">FAQ</a></li>
          <li><a href="crew.php">Crew</a></li>
          <li><a href="contact.php">Contact Us</a></li>
        </ul>
      </li>
    </ul>
  </div>

JS

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" type="text/javascript"></script>

Upvotes: 6

Views: 13493

Answers (2)

AbdulAzizFarooqi
AbdulAzizFarooqi

Reputation: 111

Most of the time, boostrap.js file reference two times. In our case, it was referenced twice, one in master and others by mistake in the inner pages (Page layout in SharePoint Case).

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362290

Change the data-target= in the button to.. .navbar-collapse

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

Upvotes: 6

Related Questions