Allow click on twitter bootstrap dropdown toggle link?

Question

We have setup the twitter bootstrap dropdown to work on hover (as opposed to click [yes we are aware of the no hover on touch devices]). But we want to be able to have the main link work when we click it.

By default twitter bootstrap blocks it, so how can we re-enable it?

Answer 1

Just add disabled as a class on your anchor:

<a class="dropdown-toggle disabled" href="http://google.com">     Dropdown <b class="caret"></b></a> 

So all together something like:

<ul class="nav">     <li class="dropdown">         <a class="dropdown-toggle disabled" href="http://google.com">             Dropdown <b class="caret"></b>         </a>         <ul class="dropdown-menu">             <li><a href="#">Link 1</a></li>             <li><a href="#">Link 2</a></li>         </ul>     </li> </ul> 

Answer 2

Since there is not really an answer that works (selected answer disables dropdown), or overrides using javascript, here goes.

This is all html and css fix (uses two <a> tags):

<ul class="nav">  <li class="dropdown dropdown-li">     <a class="dropdown-link" href="http://google.com">Dropdown</a>     <a class="dropdown-caret dropdown-toggle"><b class="caret"></b></a>     <ul class="dropdown-menu">         <li><a href="#">Link 1</a></li>         <li><a href="#">Link 2</a></li>     </ul>  </li> </ul> 

Now here's the CSS you need.

.dropdown-li {     display:inline-block !important; } .dropdown-link {     display:inline-block !important;      padding-right:4px !important; } .dropdown-caret {     display:inline-block !important;      padding-left:4px !important; } 

Assuming you will want the both <a> tags to highlight on hover of either one, you will also need to override bootstrap, you might play around with the following:

.nav > li:hover {     background-color: #f67a47; /*hover background color*/ } .nav > li:hover > a {     color: white; /*hover text color*/ } .nav > li:hover > ul > a {     color: black; /*dropdown item text color*/ }