I would like to open a dropdown menu (using Twitter Bootstrap) everytime I click on the brand of my navbar, so I tried this code:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="tabbable">
<div class="dropdown">
<a id="drop1" class="dropdown-toggle" data-toggle="dropdown" href="#menu">
<div class="brand">Brand</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li><a href="#">Action</a></li>
</ul>
</div>
<ul class="nav">
<li>
<a href="#" data-toggle="tab">Item</a>
</li>
</ul>
</div>
</div>
</div>
Result: when I click on it, the menu appears, but it's over the brand, not under. How to fix it?
div class="brand"
[Style problem]: http://jsfiddle.net/4rdPU/1/
To properly render the dropdown, your brand must be a .nav li
element. So just add the .brand
class to a standard dropdown.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="tabbable">
<ul class="nav">
<li class="dropdown">
<a id="drop1" class="dropdown-toggle brand" data-toggle="dropdown" href="#menu">
Brand
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li><a href="#">Action</a></li>
</ul>
</li>
<li>
<a href="#" data-toggle="tab">Item</a>
</li>
</ul>
</div>
</div>
</div>
That will break your brand positioning, but you fan fix it with this simple CSS:
.navbar .brand {
margin-left: 10px; /* This value could be different for another layout */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With