title: Make responsive Bootstrap navbar without hamburger menu
body: <p>I am building a portfolio project using Bootstrap. I wanted to have the navbar be responsive but not use the default hamburger menu. Instead, I have a media query that changes the text links into icons. However, when the screen is resized to 767 and below, the icons collapse into a second row. I want them to just get closer to the navbar header.</p>
  
  <p>I've been searching all day but everyone else seems to be asking about adding the hamburger menu.</p>
  
  <p>Any suggestions?</p>
  
  <p><a href="http://codepen.io/anthkris/pen/xwpPrE/" rel="nofollow">http://codepen.io/anthkris/pen/xwpPrE/</a></p>
  
  <pre><code>&lt;!-- Fixed navbar --&gt;
  &lt;nav id="mobile-nav" class="navbar navbar-default navbar-fixed-top"&gt;
    &lt;div class="container nav-mobile"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;a class="navbar-brand" href="#"&gt;K. Anthony&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;ul class="nav navbar-nav navbar-left"&gt;
          &lt;li&gt;
            &lt;a href="#heading"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#portfolio"&gt;&lt;i class="fa fa-file-photo-o"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#about-me"&gt;&lt;i class="fa fa-book"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#contact"&gt;&lt;i class="fa fa-envelope"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- #mobile-nav --&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>