Catalina Catalina - 5 days ago 9
CSS Question

Bootstrap toggle button doesn't work after including jQuery link

I've been trying to create a toggle button but it wouldn't work.
I included the Jquery file in the head section and I have all of the opened and closed html tags. Here is what I have so far.











<title>
Elephant
</title>






<div class="background">
<div class="container">





<!-- Logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">THENEWBOSTON</a>
</div>

<!-- Menu Items -->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

</div> </nav>

</div>
</div>
<!--end container-->
</footer>


Answer

You have misspelled an attribute...

data toggle="collapse"
    ^^^^---- This is single attribute. There must not be any space in between.

It should be

data-toggle="collapse"

And close your <nav> tag as well.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-fixed-top" id="navbar">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
        <span class="glyphicon glyphicon-menu-hamburger" style="color:black"></span>
      </button>
      <a class="navbar-brand" id="header"></a>
    </div>
    <div class="collapse navbar-collapse" id="mainNavBar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Collaboration</a></li>
        <li><a href="#">Prices</a></li>
      </ul>
    </div>
  </div>
</nav>

Comments