CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Jegadeesh Vontlin
Jegadeesh Vontlin

Reputation: 41

bootstrap navbar collapse not working with good jQuery order?

jQuery order is correct as I,ve called bootstrap.js after the jQuery but navbar is not working. Could you please help why is that not working?

<nav class="navbar navbar-default navbar navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">             
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="myNavbar">
              <span class="icon-bar top-bar"> </span>
              <span class="icon-bar middle-bar"> </span>  
              <span class="icon-bar bottom-bar"> </span>
          </button>
          <a class="navbar-brand" href="#">home</a>
        </div>
        <div class="bar collapse navbar-collapse" id="myNavbar">            
            <ul class="nav navbar-nav">
                <li> <a class="navbar-brand" href="index.php"> Home </a> </li>
                <li> <a class="navbar-brand" href="About.php"> About   </a> </li>
                <li> <a class="navbar-brand" href="contact.php"> Contact </a> </li>
            </ul>
        </div>
    </div>
</nav>

Upvotes: 0

Views: 488

Answers (1)

Mohammad Usman
Mohammad Usman

Reputation: 39322

You are missing # in data-target attribute.

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="myNavbar">
// -----------------------------------------------------------------------------^^^^
It should be #myNavbar

Following code should work.

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


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">

    <div class="navbar-header">

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

        <span class="icon-bar top-bar"> </span>
        <span class="icon-bar middle-bar"> </span>  
        <span class="icon-bar bottom-bar"> </span> 

      </button>

      <a class="navbar-brand" href="#"> home </a>

    </div>

    <div class="bar collapse navbar-collapse" id="myNavbar" >

      <ul class="nav navbar-nav">
        <li> <a class="navbar-brand" href="index.php"> Home </a> </li>
        <li> <a class="navbar-brand" href="About.php"> About   </a> </li>
        <li> <a class="navbar-brand" href="contact.php"> Contact </a> </li>
      </ul>   

    </div>

  </div>
</nav>

Upvotes: 1

Related Questions