Twitter Bootstrap: What is the correct way to use the `.btn` class within a navbar?

Question

I'm using a navbar for the standard nav stuff and i'd like to include a button for Sign in and Sign up.

The I'm using an a tag with the btn btn-large btn-success classes and by default it appears the navbar does not accommodate the use of nested btns.

The result is something like this:

And when hovered over, it comes out as:

My question is basically: Am i doing this wrong? Is there something I'm missing?

Thought i'd ask before I redefine CSS classes for .btn. within a navbar.

Thanks.

Disputable

you just can't have an a.btn inside of a <li>. – Deirdra

From the information provided, you are doing this correctly. Are you able to provide a link to the issue, or replicate it in jsFiddle? – Harrod

@JonathanOng Where is the documentation that confirms that? – Harrod

there is none. i asked the same question on GitHub, and someone responded with that answer. annoying, yes. – Deirdra

Answer 1

The navbar accommodates buttons without a problem - I have buttons in the navbar without any problems, and I was able to add them to the static navbar example on the Bootstrap page:

The html should be laid out like this:

<div class="navbar navbar-fixed-top active">
  <div class="navbar-inner">
    <div class="container" style="width: auto;">
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          ... nav links ...
        </ul>
        <form class="navbar-search pull-left" action="">
          ... search box stuff
        </form>
        <a class="btn btn-success">Sign in</a>
        <a class="btn btn-primary">Sign up</a>
      </div>
    </div>
  </div>
</div>

If you're not using the responsive layout to collapse the navbar on smaller screens, just put your button links one level up, in <div class="container">.

If you're still not finding the problem, try using Chrome's Dev Tools to see what CSS is being applied to the buttons that shouldn't be.

Updo

Jared, thank you so much! This is 99% perfect. Unfortunately it does not work with the dropdown li.divider-vertical. The solution is to basically create a div.pull-right AFTER the div.nav-collapse. Inside the div.pull-right i put the ul.nav with it's respective li elements. Immediately following the ul.nav is where the buttons go. If you want update your answer and i'll mark it as the solution -- otherwise just let me know and i'll answer my own question with your source code updated. – Disputable

You need to put the buttons inside a ul.nav. Otherwise, the nav-collapse will gain the height of the buttons and it will block your brand element. – Heterogony

Answer 2

As discussed here, Wrapping the link with a div works:

<div><a class='btn' href='#'>Link</a></div>

Lillalillard

Answer 3

Here is a modified version of Jared Harley's answer. This is what i ultimately used and it supports having a dropdown in the navbar.

<div class="navbar navbar-fixed-top active">
  <div class="navbar-inner">
    <div class="container" style="width: auto;">
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          ... nav links ...
        </ul>
        <form class="navbar-search pull-left" action="">
          ... search box stuff
        </form>
        <a class="btn btn-success">Sign in</a>
        <a class="btn btn-primary">Sign up</a>
      </div>
      <div class="pull-right">
        <ul class="nav">
          <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">
              Dropdown
              <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">item</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">another item</a>
              </li>
            </ul>
          </li>
          <li class="divider-vertical"></li>
        </ul>
        <a class="btn btn-primary" href="#">Primary</a>
        <a class="btn btn-success" href="#">Success</a>
      </div>
    </div>
  </div>
</div>

Disputable

I'm confused, are you able to style the dropdown with a btn class? When I apply btn to your "dropdown" <li>above, I'm still getting the original (broken) result. Cheers – Concinnate

Answer 4

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">Brand name</a>
            <ul class="nav">
                <li class="active"><a href="#">Main</a></li>
                <li><a href="#about">Next one</a></li>
            </ul>


            <div class="btn-group pull-right">
                <a class="btn btn-small dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i> Trololo</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>


        </div>
    </div>
</div>

Erlineerlinna

Answer 5

I had the same problem when putting the .btn in navbar, and when I hovered, it "cutted" half of button bg, I solved it that way that I declarated .nav > li > a.btn:hover again in main.css -> app's custom styles file, placed in head after bootstrap.css, that way it worked, because if you inspect element in firebug or any of dev tools and try to hover it, you'll noticed that .btn hover style is rewriten by nav hover style, which is placed after buttons in bootstrap.css file...

Isochronism

Answer 6

I've fixed this by adding this in :

style="margin-top:10px;"

Full button code looks like this:

<a href="/register"><button class="btn btn-warning pull-right" style="margin-top:10px;">Register</button></a>

Heathenry