68

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?

Hailwood
  • 89,623
  • 107
  • 270
  • 423

8 Answers8

122

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>
David Spence
  • 7,999
  • 3
  • 39
  • 63
  • 22
    Well, the main menu item becomes clickable this way, but the submenus don't drop down. True, I want the submenu items to show by clicking on the caret, not by hover as Hailwood did. – Attila Fulop Nov 14 '12 at 11:23
  • 4
    +1. Great solution, didn't see it in the bootstrap docs, so thanks for pointing out to the disabled attribute. – IntricatePixels Apr 25 '13 at 20:14
  • This is not working for me now, despite adding the class: ` –  Mar 31 '14 at 13:01
  • 7
    Adding *disabled* in the tag makes the dropdown stops working ?? Any solution for that to make both working? – ParaMeterz Apr 22 '14 at 18:20
  • 1
    To get around the "no hover on touch" issue, I used modernizr to add a class of no-touch to the html element. Then I added styles that allowed the dropdowns to open on hover. I added the disabled class via js only to devices that have the no-touch class from modernizr. That way, for large touch devices that actually get the normal nav, the dropdowns work as bootstrap intended. But for non-touch devices, the old-fashioned hover dropdowns take the place of bootstrap's clicky solution. Seems to me to be the best of both worlds. – codescribblr Feb 11 '15 at 12:55
  • If you add data-toggle = "dropdown" to the link it would work without adding the disabled class. Thanks though – yassine2020 Oct 26 '15 at 22:40
  • I currently have the dropdowns working on hover and on click. Adding disabled does allow the link to work, but it makes it so that hitting the down arrow on the dropdown does not open the dropdown. This is an accessibility issue for us. – Metropolis Jun 01 '16 at 20:53
  • @ALL Can this be done only for desktop and not for mobile ? I want the href to work only for desktop, and in mobile the drop down should expand. – Shahil M Sep 30 '16 at 11:34
  • What about in responsive? – Santanu Dec 06 '19 at 06:27
12

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*/
}
kingPuppy
  • 2,937
  • 1
  • 18
  • 18
11

For those of you complaining about "the submenus don't drop down", I solved it this way, which looks clean to me:

1) Besides your

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

put a new

<a class="dropdown-toggle"><b class="caret"></b></a>

and remove the <b class="caret"></b> tag, so it will look like

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

2) Style them with the following css rules:

.caret1 {
    position: absolute !important; top: 0; right: 0;
}

.dropdown-toggle.disabled {
    padding-right: 40px;
}

The style in .caret1 class is for positioning it absolutely inside your li, at the right corner.

The second style is for adding some padding to the right of the dropdown to place the caret, preventing overlapping the text of the menu item.

Now you have a nice responsive menu item which looks nice both in desktop and mobile versions and that is both clickable and dropdownable depending on whether you click on the text or on the caret.

Pere
  • 1,068
  • 12
  • 20
  • Just the answer I was looking for. True, it's a bit of a hack and sometimes things don't align perfectly - for instance I have a change in the border-bottom color on hover, which can either only affect the caret anchor or the text anchor at the same time - but it's a viable trade-off. – Nikola Ivanov Nikolov Aug 18 '14 at 21:52
4

I'm not sure about the issue for making the top level anchor element a clickable anchor but here's the simplest solution for making desktop views have the hover effect, and mobile views maintaining their click-ability.

// Medium screens and up only
@media only screen and (min-width: $screen-md-min) {
    // Enable menu hover for bootstrap
    // dropdown menus
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}

This way the mobile menu still behaves as it should, while the desktop menu will expand on hover instead of on a click.

Ken Prince
  • 1,437
  • 1
  • 20
  • 26
  • How do you keep the hovering menu showing the entire time, long enough to click an item from the list? – Rachel S Jun 22 '16 at 17:55
2

An alternative solution is just to remove the 'dropdown-toggle' class from the anchor. After this clicking will no longer trigger the dropwon.js, so you may want to have the submenu to show on hover.

Skiptomylu
  • 964
  • 1
  • 13
  • 21
1

You could use a javascript snippit

$(function()
{
    // Enable drop menu clicks
    $(".nav li > a").off();
});

That will unbind the click event preventing url changing.

Ian
  • 3,539
  • 4
  • 27
  • 48
0

Here's a little hack that switched from data-hover to data-toggle depending the screen width:

/**
 * Bootstrap nav menu hack
 */
$(window).on('load', function () {
    // On page load
    if ($(window).width() < 768) {
        $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown');
    }

    // On window resize
    $(window).resize(function () {
        if ($(window).width() < 768) {
            $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown');
        } else {
            $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-toggle').attr('data-hover', 'dropdown');
        }
    });
});
Allure Web Solutions
  • 649
  • 8
  • 19
0

This can be done simpler by adding two links, one with text and href and one with the dropdown and caret:

<a href="{{route('posts.index')}}">Posts</a>
<a href="{{route('posts.index')}}" class="dropdown-toggle" data-toggle="dropdown" role="link" aria-haspopup="true" aria- expanded="false"></a>
<ul class="dropdown-menu navbar-inverse bg-inverse">
    <li><a href="{{route('posts.create')}}">Create</a></li>
</ul>

Now you click the caret for dropdown and the link as a link. No css or js needed. I use Bootstrap 4 4.0.0-alpha.6, defining the caret is not necessary, it appears without the html.

Jorn
  • 457
  • 7
  • 11