title: Glyphicon showing on new line
body: <p><strong><a href="http://www.bootply.com/tIynq6WFft" rel="nofollow">Bootply</a></strong></p>
  
  <p>Note: that I customized my bootstrap menu. Code is below. I need the glyphicon to be next to "book", but it breaks to the next line in small resolution. </p>
  
  <pre><code>&lt;nav class="navbar navbar-fixed-top" role="navigation"&gt;
    &lt;div class="container"&gt;
      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
      &lt;div class="navbar-header"&gt;
        &lt;a class="navbar-brand" href="#"&gt;&lt;img src="assets/images/logo.png" alt=""&gt;    &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="navbar-header-sm"&gt;
        &lt;a class="navbar-brand" href="#"&gt;&lt;img src="assets/images/logo_sm.png" alt=""&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;!-- &lt;div class="text-center"&gt; --&gt;
        &lt;p class="navbar-text"&gt;book&lt;/a&gt;&lt;/p&gt;
      &lt;!-- &lt;/div&gt; --&gt; 
  
      &lt;ul class="nav navbar-nav pull-right"&gt;
        &lt;li&gt;
           &lt;a href="#" class="toggle-transparent tof"&gt;
             &lt;span class="glyphicon glyphicon-align-justify"&gt;&lt;/span&gt;
             &lt;span class="navbar-title"&gt;Table of Contents&lt;/span&gt;
           &lt;/a&gt;
         &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.navbar-header-sm {
    @media(min-width: @screen-sm-max){
  
      display: none;
    }
  }
  
  .navbar-header-sm {
    @media(max-width: @screen-sm-max){
  
      float: left;
    }
  }
  
  .navbar-header {
    @media(max-width: @screen-sm-max){
  
      display: none;
    }
  }
  </code></pre>