Rectangle 27 0

javascript Bootstrap 3: how to make head of dropdown link clickable in navbar?


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.

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!

Note
Rectangle 27 0

javascript Bootstrap 3: how to make head of dropdown link clickable in navbar?


Does not work anymore.

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?

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.

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.

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.

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!

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.

Note
Rectangle 27 0

javascript Bootstrap 3: how to make head of dropdown link clickable in navbar?


<!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>
class="dropdown-toggle" data-toggle="dropdown"

Here is the demo at jsfiddle (FYI: 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. ).

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

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!

this does not work when the menu is collapsed.

works like a charm! Thanks,

Note
Rectangle 27 0

javascript Bootstrap 3: how to make head of dropdown link clickable in navbar?


.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-menu {
    margin-top: 0px;
}
data-toggle="dropdown"
Note
Rectangle 27 0

javascript Bootstrap 3: how to make head of dropdown link clickable in navbar?


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

Add disabled Class in your anchor, following are js:

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

Note
Rectangle 27 0

javascript Bootstrap 3: how to make head of dropdown link clickable in navbar?


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

And you are free to go.

Just add the class disabled on your anchor:

The fix I needed with the perfect amount of work

seems illogical that ".disabled" means "continues to work BUT anchor is reenabled" XD

Note
Rectangle 27 0

javascript Bootstrap 3: how to make head of dropdown link clickable in navbar?


$('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');
        }
    }
});

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

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

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

Note
Rectangle 27 0

javascript Bootstrap 3: how to make head of dropdown link clickable in navbar?


/*!
 * 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>
HOVER
data-hover="dropdown"
  • data-toggle="dropdown" - for Clickable(can use Mobile as well web)

@JGEstevez what you mean by not working? on mobile ? or PC ??

@downvoter Please specify the reason please

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.

Note
Rectangle 27 0

javascript Bootstrap 3: how to make head of dropdown link clickable in navbar?


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

Note
Rectangle 27 0

javascript Bootstrap 3: how to make head of dropdown link clickable in navbar?


<!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>
class="dropdown-toggle" data-toggle="dropdown"

Here is the demo at jsfiddle (Note: jsfiddle won't let you redirect to a new page.)

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

this does not work when the menu is collapsed.

works like a charm! Thanks,

Note