Opening a dropdown menu from navbar branding

Question

I would like to open a dropdown menu (using Twitter Bootstrap) every time I click on the brand of my navigator, 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, a menu appears, but it is above the brand, and not below. How to fix it?

Examples

• Standard version [OK]: http://jsfiddle.net/4rdPU/2/
• Standard Version + div class="brand" [Style Problem]: http://jsfiddle.net/4rdPU/1/
• Brand Version [Invalid Menu Position]: http://jsfiddle.net/4rdPU/3/

Answer 1

To display the dropdown correctly, your brand must be a .nav li element. So just add the .brand class to the standard dropdown menu.

 <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> 

This will break your brand positioning, but you can fix it with this simple CSS:

 .navbar .brand { margin-left: 10px; /* This value could be different for another layout */ }