has anybody got a way to make a bootstrap 5 dropdown nav open on hover but then also go to another page on click as well.

for example my dropdown looks like this:

<a class="nav-link dropdown-toggle" href="/category/mens" data-bs-toggle="dropdown">Mens</a>

And using the CSS to make it open on hover

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

On hover the dropdown opens a megamenu which shows the list of categories but I also want the user to click on the dropdown text to go to the main category page if that makes sense. but even know I have a href it does not go to that page because of data-bs-toggle, Any help would be appreciated.

has anybody got a way to make a bootstrap 5 dropdown nav open on hover but then also go to another page on click as well.

for example my dropdown looks like this:

<a class="nav-link dropdown-toggle" href="/category/mens" data-bs-toggle="dropdown">Mens</a>

And using the CSS to make it open on hover

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

On hover the dropdown opens a megamenu which shows the list of categories but I also want the user to click on the dropdown text to go to the main category page if that makes sense. but even know I have a href it does not go to that page because of data-bs-toggle, Any help would be appreciated.

• javascript
• html
• jquery
• css
• twitter-bootstrap

• make sure your path got the right way – shawaiz minhas Commented Jan 17, 2022 at 10:37
• the href path is correct. the problem is when clicked on the a tag it does not do anything in the browser, not even sets to # if i set the href to that – JoeCold Commented Jan 17, 2022 at 11:54
• Anybody else now a method to get around this? – JoeCold Commented Jan 24, 2022 at 10:16

6 Answers 6

I just add this code in my css

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

.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}

I've found that adding the following jQuery code solves the problem:

// Show dropdown on hover
$('.dropdown').mouseover(function () {
    if($('.navbar-toggler').is(':hidden')) {
        $(this).addClass('show').attr('aria-expanded', 'true');
        $(this).find('.dropdown-menu').addClass('show');
    }
}).mouseout(function () {
    if($('.navbar-toggler').is(':hidden')) {
        $(this).removeClass('show').attr('aria-expanded', 'false');
        $(this).find('.dropdown-menu').removeClass('show');
    }
});

// Go to the parent link on click
$('.dropdown > a').click(function(){
    location.href = this.href;
});

This does create an issue for mobile usage, a solution would be to wrap the code above inside an if statement which checks the browser width before executing the code. This does mean mobile users still can't visit the parent page.

My solution to this is to have the dropdown permanently expanded in the mobile menu.

You can use this custom css:

   @media (min-width: 576px) {
      .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
      }
    }

I added this @media (min-width: 576px) so that it can be stil clickable on mobile.

In case you still haven't found an answer, here's what you need to do:

In the dropdown parent anchor element, change data-bs-toggle="dropdown" to data-bs-hover="dropdown". That's it. Now your parent link will work, too.

However, the data-bs-toggle attribute is needed for the dropdown to work on mobile devices (small resolution screens), so I my solution is to use jQuery to restore it on smaller screens like this:

$(document).ready(function() {
    if($(window).width() <= 831) {
        $(".nav-link.dropdown-toggle").removeAttr("data-bs-hover");
        $(".nav-link.dropdown-toggle").attr("data-bs-toggle", "dropdown");
    }
});

 <a class="nav-link fs-5 fw-bold" href="pages/services.html" type="button" data-bs-toggle="" aria-expanded="true">
                              Services
                            </a>

hii guys remove dropdwon from data-bs-toggle that's it without any css or js

If You Want to show dropdown on hover in bootstrap then you need to visit here here is very easy way to do that . there are less number of code of css and your issue will fix and if yout want to go to new url you should add attriute target="_blank" in anchor tag.

https://www.youtube./watch?v=owdqNLzII38