title: Bootstrap Navbar Collapse with brand
body: <p>I have a problem with my navbar.
  I use Bootstrap 3.3.7.</p>
  
  <p>My navbar needs to collapse at 1200px but it's still not working.
  When my navbar at 770px collapse then my navbar-brand is not correctly working. The search field went under the button but I want that is all on one line the whole time.</p>
  
  <p>I try a lot and search a lot.
  (e.g. <a href="https://stackoverflow.com/questions/18192082/bootstrap-3-navbar-collapse">Bootstrap 3 Navbar Collapse</a> )</p>
  
  <p>Code:   </p>
  
  <pre><code>    &lt;div class="container"&gt;
  &lt;nav class="navbar navbar-default navbar-expand-lg bg-light"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;span class="navbar-brand" id="navbarbrand" href="#"&gt;
                  &lt;form class="navbar-form"&gt;
                      &lt;button id="addDoku" type="button" class="btn btn-default " data-toggle="modal" data-target="#myModal"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;input type="text" name="search" onkeyup="searchFunction1()" id="search" class="form-control" placeholder="Search"&gt;
          &lt;/form&gt;
          &lt;/span&gt;
          &lt;button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarNav"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
           &lt;span class="icon-bar"&gt;&lt;/span&gt;
           &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
  
          &lt;div class="collapse navbar-collapse" id="navbarNav"&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li&gt;&lt;a href="#vorlagen"&gt;Vorlagen&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#allgemein"&gt;Allgemein&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#netzwerk"&gt;Netzwerk&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#rma"&gt;RMA Support&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#honeywell"&gt;Honeywell&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#vocollect"&gt;Vocollect&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#voiceman"&gt;VoiceMan&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#sap"&gt;SAP&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#sonstige"&gt;Sonstige&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>This is what I want to avoid both of them:</p>
  
  <p><a href="https://i.stack.imgur.com/F0WzR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F0WzR.png" alt="I want this in one line"></a></p>
  
  <p><a href="https://i.stack.imgur.com/9wREK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9wREK.png" alt="Here my navbar need to already collapse"></a></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I add my css with this link</p>
  
  <pre><code>&lt;link href="Stylesheet2.css" rel="stylesheet"&gt;
  </code></pre>
  
  <p>But I have some other CSS style in this file. Maybe this is the problem?
  What I mean is that the @media needs to be in an extra CSS file? </p>