Bootstrap navbar search

Bootstrap with a serch input box and a toggled menu

by Evert Ramos

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<nav class="navbar navbar-default">
  <div class="container">

    <div class="col-xs-1 hidden-xs">
      <div class="navbar-header">
        <a href="#" class="pull-left">
          <img src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png" width="50px" height="50px">
        </a>
      </div>
    </div>
    <!-- nav-bar-header -->

    <div class="col-md-10 col-sm-10 col-xs-10">
      <form class="navbar-form" role="search">
        <div class="form-group" style="width: 100%;">
          <input type="text" class="form-control" placeholder="Pesquisar" style="width: 90%;">
          <div class="visible-lg-inline visible-md-inline">
            <button type="submit" class="btn btn-default"><i class="fa fa-fw fa-search"></i></button>
          </div>
        </div>
      </form>
    </div>

    <div class="col-md-1 col-sm-1 col-xs-2">
      <div class="navbar">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
    </div>

    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Acessar o Sistema</a></li>
        <li><a href="#">Registrar</a></li>
      </ul>
    </div>

  </div>
  <!-- container -->
</nav>

CSS

@media (max-width: 2000px) {
  .navbar-header {
    float: none;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-left,
  .navbar-right {
    float: none !important;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
    vertical-align: top;
    display: inline-block;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .collapse.in {
    display: block !important;
  }
}