CODEWITHSUNDEEP
htmltwitter-bootstrap
user6096069
user6096069

Reputation:

Bootstrap Navbar not showing an un-ordered list

I am making a Navbar using Bootstrap 3 and when I put in the ul tag and add a list item it doesn't show up. I have tried wrapping it in a div with the class of container but that doesn't work.

<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="utf-8">
<title>Bootstrap Course</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body>
<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="logo.png"></a>
      <div class="nav-collapse collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="row">

</div>

    <script     src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"     integrity="sha384-    0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"     crossorigin="anonymous"></script>
    <script src="scripts.js"></script>
  </body>

</html>

Upvotes: 0

Views: 179

Answers (3)

niyasc
niyasc

Reputation: 4490

Please use navbar code listed in bootstrap documentation.

You need to replace class="nav-collapse collapse navbar-responsive-collapse"> with class="collapse navbar-collapse"

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

<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="logo.png">
      </a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>
        </li>
      </ul>
    </div>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="scripts.js"></script>

Upvotes: 2

Isabel Inc
Isabel Inc

Reputation: 1899

Looks like you're missing JQuery. Add this above your bootstrap JS

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

Here's an example codepen http://codepen.io/anon/pen/zBRLZo

Upvotes: 0

Vijunav Vastivch
Vijunav Vastivch

Reputation: 4211

use border first on your css file to locate where is your nav bar location in the page like this..

div class="navbar navbar-default navbar-fixed-top" style="border:2px solid #000000">

this will guide you..

Hope it helps..

Upvotes: 0

Related Questions