title: Bootstrap Navbar Expands when Window gets smaller
body: <p><a href="http://i.stack.imgur.com/umyCU.png" rel="nofollow">Regular</a></p>
  
  <p><a href="http://i.stack.imgur.com/mxyTO.png" rel="nofollow">Smaller</a></p>
  
  <p>My bootstrap 3.0 navbar expands when the window gets to mobile sizes. I've included pictures of the two views above and where the issue is. </p>
  
  <p>I am trying to get my navbar to not expand when the screen gets smaller and cover part of my page. </p>
  
  <p>It may have something to do with the search bar and the buttons near it. I managed to get the search form stay the same size when it expanded across the entire screen behind the sidebar before. </p>
  
  <p>Any help would be great. </p>
  
  <p>HTML</p>
  
  <p>`
      
          
          </p>
  
  <pre><code>        &lt;a class="navbar-brand" style="margin-left: -20px"&gt;GCImage&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
      &lt;div class="navbar-right"&gt;
          &lt;form class="navbar-form" role="search"&gt;
              &lt;div class="form-group"&gt;
                  &lt;input type="text" class="form-control" placeholder="Search" align="right" ng-model="nav.keyword" uib-popover="Not Implemented Yet" popover-placement="bottom" popover-trigger="focus"&gt;
              &lt;/div&gt;
              &lt;button type="submit" class="btn btn-default" align="right" uib-popover="Not Implemented Yet" popover-placement="bottom" popover-trigger="focus"&gt;
                  &lt;i class="fa fa-search"&gt;&lt;/i&gt;
              &lt;/button&gt;
              &lt;a class="btn btn-default" href="underConstruction.html"&gt;&lt;i class="fa fa-filter"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>`</p>
  
  <p>CSS</p>
  
  <pre><code>.panel-green {
      border-color: #5cb85c;
      background-color: #5cb85c;
      color: #ffffff;
  }
  
  .panel-orange {
      border-color: #ff7e47;
      background-color: #ff7e47;
      color: #ffffff;
  }
  
   .shadow {
      -moz-box-shadow: 1px 1px 2px 3px #ccc;
      -webkit-box-shadow: 1px 1px 2px 3px #ccc;
      box-shadow: 1px 1px 2px 3px #ccc;
  }
  
  .panel-footer {
      color: #000000;
  }
  
  .btn-file {
      position: relative;
      overflow: hidden;
  }
   .btn-file input[type=file] {
      position: absolute;
      top: 0;
      right: 0;
      min-width: 100%;
      min-height: 100%;
      font-size: 100px;
      text-align: right;
      filter: alpha(opacity=0);
      opacity: 0;
      outline: none;
      background: white;
      cursor: inherit;
      display: block;
  }
  .body{
      margin-left:175px
  }
  
       .navbar .navbar-form{
          padding: 0 15px;
          border: 0;
           -webkit-box-shadow: none;
          box-shadow: none;
  }
  .box{
  border-radius:0;
  }
  
  
  
  .navbar-collapse.collapse{
     display: block !important;
  }
  
  .navbar-nav&gt;li, .navbar-nav{
    float: left !important;
  }
  
  .navbar-nav.navbar-right:last-child{
    margin-right: -15px !important;
   }
  
  .navbar-right{
    float: right !important;
  }
  </code></pre>