Bootstrap 3: How to Make Head of Dropdown Link Clickable in Navbar

how to make head of dropdown link clickable in navbar

put this css in your code

.dropdown:hover .dropdown-menu {
   display: block !important;
}

check out this snippet with your code

.dropdown:hover .dropdown-menu {   display: block;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">    <div class="container-fluid">    <!-- Brand and toggle get grouped for better mobile display -->    <div class="navbar-header">      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-nav" aria-expanded="false">        <span class="sr-only">Toggle navigation</span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>      </button>       <a class="navbar-brand navbar-link" href="#"> <img src="assets/img/Saydullogo.png" id="logo"></a>    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->    <div class="collapse navbar-collapse" id="app-nav">      <ul class="nav navbar-nav navbar-right">          <li class="active"><a href="index.php"><span class="fa fa-home"></span> Home</a></li>          <li class="dropdown">          <a href="Categories.php" class="dropdown-toggle" ><span class="fa fa-medkit"></span> Categories <span class="caret"></span></a>          <ul class="dropdown-menu">            <li><a href="#">Beauty</a></li>            <li><a href="#">Cosmetics</a></li>            <li><a href="#">Medicines</a></li>          </ul>        </li>          <li><a href="#"><span class="fa fa-edit"></span> Registeration</a></li>          <li><a href="#"><span class="fa fa-phone-square"></span> Contact Us</a></li>      </ul>    </div><!-- /.navbar-collapse -->  </div><!-- /.container-fluid --></nav>

Make link clickable, but also have the dropdown?

Your current code structure simplified:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbardrop1" data-toggle="dropdown">
  Gruppen <i class="fas fa-users"></i>
  </a>
    <div class="dropdown-menu">
      ...
    </div>
</li>

As I understood - the aim is to make <i class="fas fa-users"></i> a separate dropdown link and the style should not degrade.

This will solve your issue:

<li class="nav-item dropdown nav-link">
  <a href="/#yourlink">
  Gruppen 
  </a>
  <a class="dropdown-toggle" href="#" id="navbardrop1" data-toggle="dropdown">
  <i class="fas fa-users"></i>
  </a>
    <div class="dropdown-menu">
      ...
    </div>
</li>

The trick is in the nav-link class, which makes the propper positioning of your menu element. Moving it to the <li> element may have caused some conflicts in styles if the CSS was more complex, so be careful with moving class from one element to another in future.

Note: you must understand that the dropdown menu should not be made the way you want them now, because interacting with it the average user expects a dropdown after the click, not the redirect to some external page.

Allow click on twitter bootstrap dropdown toggle link?

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>

Bootstrap 4 - Keeping Parent of Dropdown a clickable link

jQuery(function($) {  if ($(window).width() > 769) {    $('.navbar .dropdown').hover(function() {      $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
    }, function() {      $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
    });
    $('.navbar .dropdown > a').click(function() {      location.href = this.href;    });
  }});

@media only screen and (min-width:769px) {  .dropdown:hover .dropdown-menu {    display: block;  }  .dropdown-submenu {    position: relative !important;  }  .dropdown-submenu>.dropdown-menu {    top: 0 !important;    left: 100% !important;    margin-top: -6px !important;    margin-left: -1px !important;    border-radius: 0 !important;  }  .dropdown-submenu:hover>.dropdown-menu {    display: block !important;  }  .dropdown-submenu>a:after {    display: block;    content: "\f105";    font-family: 'FontAwesome';    margin-top: -18px;    right: 15px;    position: absolute;    font-weight: 300;  }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script><link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" /><nav class="navbar navbar-toggleable-md navbar-light bg-faded">  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">    <span class="navbar-toggler-icon"></span>  </button>  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">    <ul class="navbar-nav mr-auto">      <li class="nav-item active">        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Link</a>      </li><li class="nav-item dropdown">        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">          Dropdown link        </a>        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">          <a class="dropdown-item" href="#">Action</a>          <a class="dropdown-item" href="#">Another action</a>          <a class="dropdown-item" href="#">Something else here</a>        </div>      </li>    </ul>    <form class="form-inline my-2 my-lg-0">      <input class="form-control mr-sm-2" type="text" placeholder="Search">      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>    </form>  </div></nav>

How to implement a Navbar Dropdown Hover in Bootstrap v4?

Simple, CSS only solution:

.dropdown:hover>.dropdown-menu {
  display: block;
}

When clicked, it will still get the class show toggled to it (and will remain open when no longer hovered).

---

To get around this properly is to use events and properties reserved to pointer based devices: jQuery's mouseenter, mouseleave and :hover. Should work smoothly, intuitively, while not interfering at all with how the dropdown works on touch based devices. Try it out, let me know if it works for you:

Complete jQuery solution (touch untouched):

Pre v4.1.2 solution (deprecated):

$('body').on('mouseenter mouseleave','.dropdown',function(e){
  var _d=$(e.target).closest('.dropdown');
  if (e.type === 'mouseenter')_d.addClass('show');
  setTimeout(function(){
    _d.toggleClass('show', _d.is(':hover'));
    $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
  },300);
});

$('body').on('mouseenter mouseleave','.dropdown',function(e){  var _d=$(e.target).closest('.dropdown');  if (e.type === 'mouseenter')_d.addClass('show');  setTimeout(function(){    _d.toggleClass('show', _d.is(':hover'));    $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));  },300);});
/* this is not needed, just prevents page reload when a dd link is clicked */$('.dropdown a').on('click tap', e => e.preventDefault())

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/><script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">    <span class="navbar-toggler-icon"></span>  </button>  <a class="navbar-brand" href>Navbar</a>  <div class="collapse navbar-collapse" id="navbarNavDropdown">    <ul class="navbar-nav">      <li class="nav-item active">        <a class="nav-link" href>Home <span class="sr-only">(current)</span></a>      </li>      <li class="nav-item">        <a class="nav-link" href>Features</a>      </li>      <li class="nav-item">        <a class="nav-link" href>Pricing</a>      </li>      <li class="nav-item dropdown">        <a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">          Dropdown link        </a>        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">          <a class="dropdown-item" href>Action</a>          <a class="dropdown-item" href>Another action</a>          <a class="dropdown-item" href>Something else here</a>        </div>      </li>    </ul>  </div></nav>

---

Related Topics