Twitter Bootstrap: What is the correct way to use the `.btn` class within a navbar?
CssNavigationTwitter BootstrapCss FrameworksCss Problem Overview
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.
Css Solutions
Solution 1 - Css
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.
Solution 2 - Css
As discussed here, Wrapping the link with a div works:
<div><a class='btn' href='#'>Link</a></div>
Solution 3 - Css
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>
Solution 4 - Css
<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>
Solution 5 - Css
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...
Solution 6 - Css
I've fixed this by adding this in