Non-collapsing items twitter bootstrap navbar

css, twitter-bootstrap-3

Solution

Since you have links with the icons you could put them inside a ul `navbar-nav list-inline` inside `navbar-header` like this..

      <div class="navbar-text">   
              <ul class="navbar-nav list-inline">
              <li>
                <a href="#"><span id="timer" class="glyphicon glyphicon-time"></span></a>
              </li>
             ..
              <li>
                <a href="#"><span class="glyphicon glyphicon-forward"></span></a>
              </li>
              </ul>
      </div>

http://bootply.com/99011

In general, to exclude menu items form the collapse, just keep them outside the `navbar-collapse`.

Problem

Is there a best practice using twitter bootstrap when it comes to have a navbar with both items that are permanently fixed (even on mobile) and others that do collapse. When I try to add items outside of the collapse spacing gets removed on mobile devices. I could manually add a css rule, but I'm thinking there might be a way built in to handle this. Your advice would be greatly appreciated. Mobile (with spacing issue): HTML: ``` <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">My App</a> <div id="timer" class="navbar-text glyphicon glyphicon-time"><a href="#"></a></div> <div id="items-due" class="navbar-text glyphicon glyphicon-pencil"></div> <div id="add-button" class="navbar-text glyphicon glyphicon-plus-sign"></div> <div id="audio-button" class="navbar-text glyphicon glyphicon-volume-off"></div> <div id="info-button" class="navbar-text glyphicon glyphicon-info-sign"></div> <div id="back-button" class="navbar-text glyphicon glyphicon-backward"></div> <div id="next-button" class="navbar-text glyphicon glyphicon-forward"></div> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li id="forums-button"><a href="#">Forums</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> ``` So to recap, what's the best way to have navbar items that don't collapse and are properly spaced on mobile displays?

Original source