Use Bootstrap navbar as a fixed top bar that doesn't collapse

Question

I'm trying to do a simple thing: a top bar (like a fixed navbar) that has a brand name on the left and 2 icons on the right. I'm developping for mobile, so I don't want it to change (collapse, like a navbar does by default) for small screens.

I'm relatively new to Bootstrap, so I guess I'm doing something wrong.

In order to prevent the collapse, I put everything in the navbar-header div. I created a <span class="pull-right"> to get the icons to the right, but I can't get them to render correctly.

(I doubt if this matters, but I'm using Bootstrap 3.0.x.)

This is what I currently have: http://jsfiddle.net/rd73tecL/2/

score 2 · Accepted Answer · edited May 23 '17 at 11:49

Try using the following CSS to disable the collapsing effect (as referenced here: Bootstrap 3 - disable navbar collapse):

.navbar-collapse.collapse {
    display: block !important;
}

.navbar-nav>li, .navbar-nav {
    float: left !important;
}

.navbar-nav.navbar-right:last-child {
    margin-right: -15px !important;
}

.navbar-right {
    float: right !important;
}

I'm unsure as to what you mean by 2 icons on the right: to the immediate right of the logo or right of the navbar? If the latter case, you could put your nav bar links into a div and add the pull-right class to put it to the right of the navbar. You would then also need to add display: inline-block !important; to the css of your navbar logo, as shown in this JSfiddle

Hope that helps.

score 0 · Answer 2 · answered Dec 23 '14 at 01:27

Try using this code:

        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
              <div class="navbar-header">
                <a class="navbar-brand" href="#">Fibe</a>
                <span class="navbar-right pull-right">
                  <ul class="navbar-nav nav">
                    <li class="navbar-link"><span class="glyphicon glyphicon-search"></span></li>
                    <li class="navbar-link"><span class="glyphicon glyphicon-star"></span></li>
                  </ul>
                </span>
              </div>
            </div>
        </nav>

Just amended

<span class="navbar-right"> with <span class="navbar-right pull-right">

Hope this helps.

That code gets them to the right, but they are moved halfway out of the screen. They should be formatted like regular navbar items. — Steven Roose, Dec 24 '14 at 09:16

Use Bootstrap navbar as a fixed top bar that doesn't collapse

2 Answers2