Bootstrap - Responsive Navigation Bar

by Kondal Durgam

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse" id="top-menu" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-target="#navbarCollapse" data-toggle="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>
    <!-- Collapse navigation -->
    <div class="collapse navbar-collapse" id="navbarCollapse">

      <ul class="nav navbar-nav">
        <li><a href="#">Lotus Construction</a></li>
        <li><a href="#">Lotus Interior</a></li>
        <li><a href="#">Lotus Digital</a></li>
        <li><a href="#">Lotus Property</a></li>
        <li><a href="#">Lotus Site</a></li>
      </ul>
      <!-- Search box -->
      <form class="navbar-form navbar-right">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
          <div class="input-group-btn">
            <button class="btn btn-info" type="submit">	<i class="glyphicon glyphicon-search"></i>

                            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- End container-fluid -->
</nav>

CSS

.navbar {
  margin: 15px;
  font-family: 'Raleway', sans-serif;
  background: #444444;
}

.navbar-inverse .navbar-nav>.active>a {
  background: #000000;
}

.navbar-inverse .navbar-nav>li>a {
  color: #F2DEDE;
}