Best way to use Bootstrap 3 Navbar without responsive collapse

Question

I'm trying to create a simple Navbar in Bootstrap 3 that doesn't collapse - responsive isn't necessary here because we just have a simple title on the left + button on the right.

My goal is to have the title + buttons always appear the same for all resolutions. Something like this:

<div class="navbar navbar-fixed-top">

    <form class="navbar-form navbar-right">
        <button class="btn btn-default">Button 1</button>
        <button class="btn btn-default">Button 2</button>
    </form>

    <a class="navbar-brand" href="#">Title Here</a>

</div>

I've tried numerous combinations from the documentation. And this post outlines how to use the new .nav-header classes. I've tried duplicating the elements inside .nav-header - and also tried overriding the BS3 media query styles.

Is there an easier way to use the Navbar without collapsing?

score 57 · Accepted Answer · answered Aug 17 '13 at 20:03

57

The best way I could find is to use 2 navbar-header containers, and then use pull-left and pull-right since they aren't tied to any responsive media queries..

<div class="navbar navbar-fixed-top">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">Title Here</a>
    </div>
    <div class="navbar-header pull-right">
      <button type="button" class="btn btn-default navbar-btn">Button 1</button>
      <button type="button" class="btn btn-default navbar-btn">Button 2</button>
    </div>
</div>

Demo on Bootply: http://bootply.com/74912

answered Aug 17 '13 at 20:03

Carol Skelly

351,302
90
710
624

2

Works great - thanks for suggesting the .navbar-btn class too – Ender2050 Aug 17 '13 at 20:17
Thanks! That really helped! Simplest solution I could find! – nex Feb 14 '15 at 13:53

score 1 · Answer 2 · answered Apr 11 '16 at 09:55

In my case, i only used the navbar-header and nothing else.

Basically, the navbar-header would help me easily get all the header css in there. Inside of it, i added a container and played around with my options for a similar case as yours.

    <nav class="navbar navbar-default navbar-fixed-top" id="transient-header">
        <div class="container clearfix">
            <div class="transient-header-block clearfix">
                <h1 class="hide" href="/" style="color: #fff;">Primary</h1>
                <a class="navbar-brand" href="/">{{> svgs/logos/_white_symbol}}</a>
                <div class="pull-right price">
                    <a href="#" class="btn btn-white-border contact-modal" href="#contactModal">
                        {{> svgs/_white_rupee_icon}}
                        {{product.price}}
                    </a>
                </div>
            </div>
        </div>
    </nav>

Best way to use Bootstrap 3 Navbar without responsive collapse

2 Answers2

Linked