Bootstrap Tutorial - Top-Navigation-Bar








The following code shows how to top-Navigation-Bar.

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
  href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
<script type='text/javascript'
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'
  src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<style type='text/css'>
.brand {<!--from w  ww. ja  v a  2 s. c  om-->
  height: 25px;
}
</style>
</head>
<body>
  <div class="row-fluid">
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner" id="topbar">
        <div class="container">
          <a href="#"><img class="brand"
            src="http://placehold.it/200x200"
            alt="SparkCharger" /></a>
          <button id="topbtn" type="button" class="btn btn-navbar"
            data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span><span class="icon-bar"></span><span
              class="icon-bar"></span>
          </button>
          <div class="nav-collapse">
            <ul class="nav pull-right">
              <li class="active"><form class="navbar-search brand">
                  <input type="text" class="search-query" placeholder="Search">
                </form></li>
              <li><a href="#">
                  <h5>Discover</h5>
              </a></li>
              <li><a href="#">
                  <h5>Blog</h5>
              </a></li>
              <li class="dropdown"><a class="dropdown-toggle"
                data-toggle="dropdown" href="#"><h5>
                    Start <span class="caret"></span>
                  </h5></a>
                <ul class="dropdown-menu">
                  <li><a href="#">
                      <h6>Login</h6>
                  </a></li>
                  <li><a href="#">
                      <h6>Signup</h6>
                  </a></li>
                </ul></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Click to view the demo