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.
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");
}
});