72

I'm using the default navbar and a couple of the list items are dropdowns. I'm not able to click the link that triggers the dropdown. I know that I could just add a duplicate link into the dropdown but I'd rather not. Is it possible to make the head link a clickable link (not just a handle for the dropdown)?

For reference, see the first link in the dropdown below. I want users to be able to click it and actually go to the page it points to.

<nav class="navbar navbar-fixed-top admin-menu" role="navigation">
  <div class="navbar-header">...</div>
   <!-- Collect the nav links, forms, and other content for toggling -->
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
     <ul class="nav navbar-nav navbar-right">
       <li class="dropdown">
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">
           I DONT WORK! <b class="caret"></b>
         </a>
         <ul class="dropdown-menu">
           <li><a href="/page2">Page2</a></li>
         </ul>
       </li>
       <li><a href="#">I DO WORK</a></li>
     </ul>               
   </div><!-- /.navbar-collapse -->
 </nav>
Oliver
  • 3,815
  • 8
  • 35
  • 63
emersonthis
  • 32,822
  • 59
  • 210
  • 375

16 Answers16

91

Here this the code which slides down the sub menu on hover, and let you redirect to a page if you click on it.

How: strip out class="dropdown-toggle" data-toggle="dropdown" from a tag, and add css.

Here is the demo at jsfiddle. For demo, please adjust jsfiddle's splitter to see the dropdown due to Bootstrap CSS. jsfiddle won't let you redirect to a new page.

enter image description here

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
    <style type='text/css'>
        ul.nav li.dropdown:hover ul.dropdown-menu {
            display: block;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-fixed-top admin-menu" role="navigation">
        <div class="navbar-header">...</div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown"><a href="http://stackoverflow.com/">Stack Overflow <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="/page2">Page2</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">I DO WORK</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </nav>
</body>
</html>
Win
  • 61,100
  • 13
  • 102
  • 181
  • 13
    This is a great partial solution to a problem that I've been trying to fix this morning, so thank you. My only question would be how do you factor in usability for visitors on touch-screen devices? You can add a media query to make the hover cut out below, say, 992px, but then you lose the sub-menu on a touch-screen. I'd love to hear any further ideas on this! – lordchancellor Jun 08 '15 at 09:50
  • 2
    Fiddle does not seem to do anything – Matt Wilko Aug 20 '15 at 08:51
  • @MattWilko It uses bootstrap, so you need to **adjust the splitter** or **maximize the browser** in order to see the dropdown. – Win Aug 20 '15 at 15:01
  • 1
    @Mkey It uses Bootstrap responsive design. So, if you open in small browser windows, you'll only see .... You have to open in full screen browser. I replaced the screenshot with animated GIF for more clarity. – Win Feb 24 '18 at 16:23
54

Just add the class disabled on your anchor:

<a class="dropdown-toggle disabled" href="{your link}">
Dropdown</a>

And you are free to go.

Alexander Suraphel
  • 10,103
  • 10
  • 55
  • 90
deyvw
  • 820
  • 7
  • 9
18

1: remove dropdown-trigger: 

data-toggle="dropdown"

2: add this your css

.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-menu {
    margin-top: 0px;
}

posted for the people how stumbled upon this

user3314900
  • 191
  • 1
  • 5
18

Here is a small hack based on Bootstrap 3.3 using a bit jQuery.

A click on a opened dropdown-menu executes the link.

$('li.dropdown').on('click', function() {
    var $el = $(this);
    if ($el.hasClass('open')) {
        var $a = $el.children('a.dropdown-toggle');
        if ($a.length && $a.attr('href')) {
            location.href = $a.attr('href');
        }
    }
});
garfyld
  • 311
  • 2
  • 5
  • 4
    **Thank you!** Very simple and easy solution. I changed a bit so that only the head of dropdown will act as a link when clicked again (not the revealed parts of the dropdown, like separators and non-link parts of the dropdown). Instead of `$('li.dropdown')` and `$(this);` I used `$('li.dropdown :first-child')` and `$(this).parent();`. With this, the click only applies to the head of the dropdown (the first child), but the `$el` variable still refers to the entire dropdown (the `li` element). – ADTC Jul 05 '15 at 13:56
  • This should be marked as the best answer in keeping the Bootstrap menu functional as it is, with an a javascript enhancement to make parent links clickable. – klewis Dec 06 '17 at 14:48
  • I have been using garfyid's method for several years, but recently it has started to break, where clicking on any of the dropdown menu's relocated to the head items URL. Adding ADTC's modifications fixed it for me. – Alec Smythe Jun 03 '18 at 14:53
  • This is the best solution I have ever met. Must be marked accordingly!! – GHopper Aug 12 '18 at 22:41
11

I know this is a little old, but I recently came across this while looking for a similar solution. Relying on hover events isn't good for responsive design, and especially terrible on mobile/touch screens. I ended up making a small edit to the dropdown.js file the allows you to click the menu item to open the menu and if you click the menu item again it will follow it.

The nice thing about this is it doesn't rely on hover at all and so it still works really nicely on a touch screen.

I've posted it here: https://github.com/mrhanlon/twbs-dropdown-doubletap/blob/master/js/dropdown-doubletap.js

Hope that helps!

Matthew Hanlon
  • 151
  • 1
  • 5
  • This is by far the best way to go. Thanks for doing this, I was just about to do the same thing, you saved me from re-inventing the wheel! – Joel Kinzel May 14 '14 at 14:02
  • It is likely that bootstrap's own `dropdown.js` has diverged enough in the 2+ years that this version no longer applies. The version linked above was for bootstrap v3.3.5. It looks like the eventing in 3.3.6 has changed a bit, I haven't tested against that version. Also, it surely won't work in 4.x. – Matthew Hanlon Jun 22 '16 at 19:26
  • Usually you'd have scripts that will disable hover functions on mobile sized devices, so having hover really isnt such a bad idea, just got to make sure to alter the hover once the resolutions are mobile sized. – killstreet Aug 05 '16 at 07:29
  • Glad you raised the cross-device behavior issue. IMHO the double tap should be active only on mobile, otherwise hovering is the way to display and click the way to go, don't you think? – Augustin Riedinger Apr 21 '17 at 09:58
5

No need of use addition CSS/JS (Tested)

  1. data-toggle="dropdown" - for Clickable (can use Mobile as well web)
  2. data-hover="dropdown" - for Hover (web only, because mobile doesn't have feature HOVER)

Works fine on Mobile as well :)

Code Example for Clickable(data-toggle="dropdown")

/*!
 * this CSS code just  for snippet preview purpose. Please omit when using  it. 
 */

#bs-example-navbar-collapse-1 ul li {
  float: left;
}

#bs-example-navbar-collapse-1 ul li ul li {
  float: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li>
      <a class="" href="">Home</a>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                subnav1
            </a>
      <ul class="dropdown-menu">
        <li><a href="">Sub1</a></li>
        <li><a href="">Sub2</a></li>
        <li><a href="">Sub3</a></li>
        <li><a href="">Sub4</a></li>
        <li><a href="">Sub5</a></li>
        <li><a href="">Sub6</a></li>
      </ul>
      <div class="clear"></div>
    </li>
    <li class="dropdown">
      <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
            subnav2
            </a>
      <ul class="dropdown-menu">
        <li><a href="">Sub1</a></li>
        <li><a href="">Sub2</a></li>
        <li><a href="">Sub3</a></li>
        <li><a href="">Sub4</a></li>
        <li><a href="">Sub5</a></li>
        <li><a href="">Sub6</a></li>
      </ul>
      <div class="clear"></div>
    </li>
  </ul>
</div>

<br>
<br>
<p><b>Please Note:</b> added css code not related to Bootstrap navigation. It's just for snippet preview purpose </p>

Output

output enter image description here

Community
  • 1
  • 1
Abdulla Nilam
  • 36,589
  • 17
  • 64
  • 85
  • @JGEstevez what you mean by not working? on mobile ? or PC ?? – Abdulla Nilam Apr 17 '17 at 20:31
  • 2
    I don't think this is what's being asked. What I understand is the title of the dropdown should be clickable and have its own link. So in your example subnav1 should have a caret that opens the dropdown, and when clicking subnav1 another link should open, not the dropdown. – gdvalderrama Apr 18 '17 at 14:39
4

Here is my solution which uses JQuery in your header, and works on Mobile.

On mobile the top links require two taps: one to dropdown the menu and one to go to its link.

$(function(){
  $('.dropdown-toggle').click(
    function(){
      if ($(this).next().is(':visible')) {
        location.href = $(this).attr('href');;
      }
     });
  });
});
Wolfgang Fahl
  • 15,016
  • 11
  • 93
  • 186
Enjabain
  • 181
  • 1
  • 8
3

Add disabled Class in your anchor, following are js:

$('.navbar .dropdown-toggle').hover(function() {
  $(this).addClass('disabled');
});

But this is not mobile friendly so you need to remove disabled class for mobile, so updated js code is following:

$('.navbar .dropdown-toggle').hover(function() {
  if (document.documentElement.clientWidth > 769) { $(this).addClass('disabled');}
  else { $(this).removeClass('disabled'); }
});
Himanshu Shakhar
  • 31
  • 3
1

Anyone arriving here who wants the quick answer to this problem. Replace the "Dropdown.prototype.toggle" function in your bootstrap.js (or dropdown.js) with the following:

  Dropdown.prototype.toggle = function (e) {
var $this = $(this)

if ($this.is('.disabled, :disabled')) return

var $parent  = getParent($this)
var isActive = $parent.hasClass('open')

clearMenus()

if (!isActive) {
    if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
        // if mobile we use a backdrop because click events don't delegate
        $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
    }

    var relatedTarget = { relatedTarget: this }
    $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))

    if (e.isDefaultPrevented()) return

    $parent
      .toggleClass('open')
      .trigger('shown.bs.dropdown', relatedTarget)

    $this.focus()
}
else
{
    var href = $this.attr("href").trim();

    if (href != undefined && href != " javascript:;")
        window.location.href = href;
}

return false
  }

On the second click (ie: if the menu item has the class "open") it will first check if the href is undefined or set to "javascript:;" before sending you along your merry way.

Enjoy!

pim
  • 12,019
  • 6
  • 66
  • 69
1

This enables the link in the top-level menu of the dropdown when it's opened and disables it when closed, with the only drawback of apparently having to "tap" twice outside of the dropdown to close it in mobile devices.

$(document).on("page:load", function(){
    $('body').on('show.bs.dropdown', function (e) {
        $(e.relatedTarget).addClass('disabled')
    });
    $('body').on('hide.bs.dropdown', function (e) {
        $(e.relatedTarget).removeClass('disabled')
    });
});

Note this assumes the "standard" markup and Turbolinks (Rails). You can try with $(document).ready(...)

hisa_py
  • 929
  • 11
  • 16
1

Alternatively here's a simple jQuery solution:

$('#menu-main > li > .dropdown-toggle').click(function () {
    window.location = $(this).attr('href');
});
Allure Web Solutions
  • 649
  • 8
  • 19
1

This topic is super old, but I needed a solution that worked on desktop AND mobile and none of these seemed to work for me. Unfortunately, this is the solution I came up with that involves checking the window width and comparing it to the mobile menu breakpoint:

$( 'a.dropdown-toggle' ).on( 'click', function( e ) {
    var $a = $( this ),
        $parent = $a.parent( 'li' ),
        mobile_bp = 767, // Default breakpoint, may need to change this.
        window_width = $( window ).width(),
        is_mobile = window_width <= mobile_bp;

    if ( is_mobile && ! $parent.hasClass( 'open' ) ) {
        e.preventDefault();
        return false;
    }

    location.href = $a.attr( 'href' );
    return true;
});
solepixel
  • 797
  • 2
  • 9
  • 19
0

i know its too late but anyone who came here for help now you can see this post .There are two options either use css/ JavaScript and if you use css it will be applicable to devices greater that 769px width for clickable top menu, that will be work perfectly f

See here for article

Sikander
  • 2,799
  • 12
  • 48
  • 100
0

Most of the above solutions are not mobile friendly.

The solution I am proposing detects if its not touch device and that the navbar-toggle (hamburger menu) is not visible and makes the parent menu item revealing submenu on hover and and follow its link on click

Also makes tne margin-top 0 because the gap between the navbar and the menu in some browser will not let you hover to the subitems

$(function(){
    function is_touch_device() {
        return 'ontouchstart' in window        // works on most browsers 
        || navigator.maxTouchPoints;       // works on IE10/11 and Surface
    };

    if(!is_touch_device() && $('.navbar-toggle:hidden')){
      $('.dropdown-menu', this).css('margin-top',0);
      $('.dropdown').hover(function(){ 
          $('.dropdown-toggle', this).trigger('click').toggleClass("disabled"); 
      });   
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

$(function(){
  $("#nav .dropdown").hover(
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
      $(this).toggleClass('open');
    },
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
      $(this).toggleClass('open');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>
GiorgosK
  • 7,647
  • 2
  • 29
  • 26
0

This worked in my case:

$('a[data-toggle="dropdown"]').on('click', function() {

    var $el = $(this);

    if ( $el.is(':hover') ) {

        if ( $el.length && $el.attr('href') ) {
            location.href =$el.attr('href');
        }

    }

});
Ilán Vivanco
  • 26
  • 3
-2

This 100% works:

HTML:

<li class="dropdown">
          <a href="https://www.bkweb.co.in/" class="dropdown-toggle" >bkWeb.co.in Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>

CSS:

@media (min-width:991px){
  ul.nav li.dropdown:hover ul.dropdown-menu {
    display: block;
  }
}

EXAMPLE in CODEPEN

Alpesh Panchal
  • 59
  • 8
  • 3
    Thank you for this code snippet, which might provide some limited, immediate help. A [proper explanation would greatly improve its long-term value](//meta.stackexchange.com/q/114762/350567) by showing *why* this is a good solution to the problem, and would make it more useful to future readers with other, similar questions. Please [edit] your answer to add some explanation, including the assumptions you've made. – iBug Feb 23 '18 at 12:26