title: Can't stop the navigation bar from breaking in two lines in bootstrap 3.3.7
body: <p>I'm trying to learn how to work with the bootstrap framework, but i'm having trouble in manipulating bootstrap.css.</p>
  
  <p>I have this navigation bar with collapse feature. I know that it triggers when the viewport is lesser than bootstrap's media queries variables. Ok, I read numerous treads in Stack Overflow and other sites, but still I couldn't fix it.
  When i resize the browser to about 880px the navibar breaks in two rows. Searching for solutions for this unwanted behavior, I discovered that there's two ways of  fixing this, one is to custumize bootstrap's media queries variables and compile it again (what I already did) or tweak bootstrap stylesheet.
  The problem is that I'm not good in neither bootstrap or CSS layouting...
  That's why I came to seek the knowledge of the pros. So what I want to acomplish is:</p>
  
  <ul>
  <li>Stop the navibar from breaking in two rows;</li>
  <li>Make the navibar displayable (not collapsed) the most I can (given the width space I have to work with for it to be displayable and when the width is too short make it collapse).</li>
  <li>Do it through CSS only (if possible).</li>
  </ul>
  
  <p>Here's the code:</p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang = "en"&gt;
  
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"/&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;title&gt;Royal Designs&lt;/title&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;header&gt; &lt;!-- Header Section --&gt;
  
      &lt;!-- Responsive Navigation links and Search box --&gt;
      &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;!-- Logo and dropdown button in smaller viewports --&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarCollapse" aria-expanded="false"&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 href="/"&gt;&lt;div class="nav-brand"&gt;&lt;/div&gt;&lt;/a&gt;
              &lt;/div&gt; &lt;!-- end of nav-header --&gt;
              &lt;!-- Links in dropdown button in smaller viewports --&gt;
              &lt;div class="collapse navbar-collapse navbar-right" id="navbarCollapse"&gt;
                  &lt;ul class="nav navbar-nav navbar-left"&gt;
                      &lt;li class="active"&gt;&lt;a href="#"&gt;Início&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Sobre Nós&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Serviços&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Contato&lt;/a&gt;&lt;/li&gt;
                      &lt;!-- Search bar and Submit button --&gt;
                      &lt;form class="navbar-form navbar-right" role="search"&gt;
                          &lt;div class="input-group"&gt;
                              &lt;label for="searchbox"&gt;
                                  &lt;input id="searchbox" class="form-control" type="text" placeholder="Search for..." name="searchbox"&gt;
                              &lt;/lable&gt;
                              &lt;div class="input-group"&gt;
                                  &lt;button class="btn btn-default" type="submit"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;&lt;/button&gt;
                              &lt;/div&gt; &lt;!-- input-group --&gt;
                          &lt;/div&gt; &lt;!-- input-group --&gt;
                      &lt;/form&gt;
                  &lt;/ul&gt;
              &lt;/div&gt; &lt;!-- end of collapse--&gt;
          &lt;/div&gt; &lt;!-- end of container-fluid --&gt;
      &lt;/nav&gt; &lt;!-- end of navbar --&gt;
  
  &lt;/header&gt;&lt;!-- End of header Section --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS: I tryed so meny things that I found searching for a solution that I don't know what's taking affect or not anymore. Added the changes suggested by Dr Brad. The stylesheet is as follows:</p>
  
  <pre><code>/* ------    Media query: do navbar collapse due to viewport    -----*/
  @media (max-width: 900px) {
      .navbar-header {
          float: none;
      }
      .navbar-toggle {
          display: block;
      }
      .navbar-collapse {
          border-top: 1px solid transparent;
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }
      .navbar-nav {
          float: none!important;
          margin: 7.5px -15px;
      }
      .navbar-nav li {
          float: none;
          width: 100%;
          min-width: 880px;
          overflow: none;
          white-space: nowrap;
      }
      .navbar-nav&gt;li&gt;a {
          padding-top: 10px;
          padding-bottom: 10px;
      }
  }
  /* --------   End Collapsed Navbar Media Query    --------*/
  </code></pre>
  
  <p><strong>In time:</strong> changing the bootstrap media query from 768px to 900px works (I tested it), though I would like an alternate solution for this through CSS, if possible.</p>
  
  <p><strong>Thought:</strong> I think it might be less painfull to do this from scratch instead of doing it on top of bootstrap stylesheet (if only I was good in CSS...). Open to controversies.</p>
  
  <p><strong>Note:</strong> I don't have a live example, sry.</p>