title: How to get Bootstrap Navbar to appear on one line in the xs layout?
body: <p>I have the following Bootstrap navbar, but when it displays in the <code>xs</code> layout, I want it to show on one line. How can I force it to display on one line and not break. It obviously has enough room.</p>
  
  <p><a href="https://i.stack.imgur.com/6FMmT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6FMmT.png" alt="enter image description here"></a></p>
  
  <p></p>
  
  <pre><code>    &lt;nav class="navbar navbar-inverse"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;a class="navbar-brand" href="#"&gt;Company Name&lt;/a&gt;
              &lt;/div&gt;                
              &lt;ul class="nav navbar-nav visible-sm-block visible-md-block visible-lg-block"&gt;
                  &lt;li class="active"&gt;&lt;a href="#"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;                    
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a href="#" data-toggle="dropdown" class="dropdown-toggle"&gt;&lt;span class="glyphicon glyphicon-cog"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Settings 1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Settings 2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Settings 3&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Settings A&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Settings B&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a href="#" data-toggle="dropdown" class="dropdown-toggle"&gt;&lt;span class="glyphicon glyphicon-menu-hamburger"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Menu A&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Menu B&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Menu C&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;                        
                  &lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;div style="display:none" class="navbar-collapse"&gt;
                  &lt;p class="navbar-text  fix_navbar_left_larger"&gt;Company Name&lt;/p&gt;
                  &lt;p class="navbar-text fix_navbar_left_xs"&gt;Company Name&lt;/p&gt;
                  &lt;p class="navbar-text visible-sm-block visible-md-block visible-lg-block"&gt;&lt;/p&gt;
                  &lt;p class="navbar-text visible-sm-block visible-md-block visible-lg-block"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/p&gt;
                  &lt;a class="navbar-brand navbar-brand navbar-right dropdown" href="#"&gt;
                      &lt;span class="glyphicon glyphicon-menu-hamburger"&gt;&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;a class="navbar-brand navbar-brand navbar-right" href="#"&gt;
                      &lt;span class="glyphicon glyphicon-cog"&gt;&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;                        
          &lt;/div&gt;
      &lt;/nav&gt;
  
      &lt;div class="pagecontent"&gt;
          &lt;p class="visible-xs-block"&gt;seen on xs screens.&lt;/p&gt;
          &lt;p class="visible-sm-block"&gt;seen on sm screens.&lt;/p&gt;
          &lt;p class="visible-md-block"&gt;seen on md screens.&lt;/p&gt;
          &lt;p class="visible-lg-block"&gt;seen on lg screens.&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>