title: How to make bootstrap 3 navbar not wrap
body: <p>I have a bootstrap 3 navbar.</p>
  
  <p><a href="https://jsfiddle.net/dev810/z26y14dq/1/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <pre><code>&lt;div class="navbar navbar-inverse no-print"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&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;a class="navbar-brand" href="/portal/home/index/"&gt;Logo of Site&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="navbar-collapse collapse"&gt;
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li&gt;&lt;a href="/portal/home/index/"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;My Menu Processes&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Enquiries&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
  
              &lt;/li&gt;
  
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Admin Reports &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
  
              &lt;/li&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;System Maintenance&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;      
                  &lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li&gt;
                &lt;a&gt;Change password&lt;/a&gt; 
  
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Welcome  Firstname Lastname&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Log Out&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When the width of the window is full desktop size it is correct.</p>
  
  <p>When the width of the window is smaller mobile phone size it correct.</p>
  
  <p>In between these two sizes it wraps this menu as well as doubling the menu's height which I don't want.</p>
  
  <p><a href="https://i.stack.imgur.com/uFhIf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uFhIf.png" alt="enter image description here"></a></p>
  
  <p>I think my only option is probably to increase the mobile width to increase with inbetween widths so the navbar shows in mobile mode in the screenshot.</p>
  
  <p>What css do I need to achieve this?</p>
  
  <p>How do I force the right navbar <code>&lt;ul&gt;</code> to not be allowed to move below the left navbar <code>&lt;ul&gt;</code>?</p>