How to: Non collapsing navigation items Bootstrap 3

Question

I have searched high and low for this, on SO too but didn't find the "correct" answer.

Just figured it out myself.. Thought to share this, hope it helps someone..

Problem with BS3 is that it's Mobile first, which is a good thing, usually.. It's just that I need a few "default" options in the navbar regardless of the collapse state. Just like BS2.

So how can we do this?

Answer 1

One thing is obvious looking at the html code, the .navbar-header stays where it is, it doesn't collapse. Another thing, the magic collapse button has some way of hiding itself, probably CSS but hey, the idea is to abstract this layer so we don't have to worry about it..

But we can take advantage of this, let's place the links I want to show in there, they won't collapse.

What you will see is that your list items will end up vertically, that's not what you want.. So why does it do that?

Well.. If you use Firebug or some other development inspector, you will find that these items have been set to display : block;, that is making them the width of the screen pushing each next item down.

We need to change that behaviour. So let's add a new class to the ul that we can define in our custom CSS. I named it no-collapse but you can name it whatever you want..

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" data-toggle="collapse" data-target="#bs-navbar-collapse" class="navbar-toggle">
            <span class="sr-only">Hamburger menu</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand glyphicon glyphicon-home" title="Home"></a>
      <!-- THIS IS WHERE THE MAGIC HAPPENS! -->
      <ul class="nav navbar-nav no-collapse">
        <li><a href="#">Apple</a>
        </li>
        <li><a href="#">Banana</a>
        </li>
      </ul>
    </div>
    <!-- THE STUFF IN THIS DIV WILL COLLAPSE.. -->
    <div id="bs-navbar-collapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">More Fruits <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li class="dropdown-header">Citrus</li>
            <li>
                <a href="#">Lemon</a>
            </li>
            <li>
                <a href="#">Orange</a>
            </li>
            <li class="divider"></li>
            <li class="dropdown-header">    
                Also a fruit
            </li>
            <li>
                <a href="#">Tomato</a>
            </li>
          </ul>
        </li>
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Veggies <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li class="dropdown-header">Green stuff</li>
            <li>
                <a href="#">Spinache</a>
            </li>
            <li>
                <a href="#">Lettuce</a>
            </li>
            <li class="divider"></li>
            <li class="dropdown-header">Other stuff</li>
            <li><a href="#">Carrot</a>
            </li>
            <li><a href="#">Romenesko broccoli</a>
            </li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
            <a href="#">This works</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

You'll need a modification, add a CSS (or LESS/SASS) after the bootstrap style sheets.

Add this CSS:

.no-collapse li, .no-collapse li a
{
    text-align  : center;
    float       : none;
    display     : inline-block;
}

Now in Bootply it would look like this: http://www.bootply.com/render/133885 source here:http://www.bootply.com/133885

Now we can have the healthy Apple and Banana on the screen on our mobile devices without resorting to the hamburger menu!