Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[Bootstrap 4] Dropdown navbar menu on hover
// Dropdown navbar menu on hover
$('.dropdown-menu', this).css('margin-top', 0);
$('.dropdown').hover(function () {
$('.dropdown-toggle', this).trigger('click').toggleClass("disabled");
});
@milyas77

This comment has been minimized.

Copy link

milyas77 commented Jan 2, 2018

i try this it is notworking

@CherenkovS

This comment has been minimized.

Copy link

CherenkovS commented Jan 12, 2018

Works. Thanks!

@cevatasln

This comment has been minimized.

Copy link

cevatasln commented Mar 18, 2018

$('.dropdown-toggle').hover(function () { $(this).trigger('click').toggleClass("disabled"); });
I think that's better

@doublejosh

This comment has been minimized.

Copy link

doublejosh commented Mar 20, 2018

The second solution avoids the UX annoyance where the menu disappears when you try to re-enter after leaving (because it doesn't catch the original mouseleave event for some reason.

But the menu still stays open after leaving the drop down. Also, there a bad toggle when hovering over the main menu item from the dropdown.

Eventually went this with this, as it avoids all those issues and is pure CSS :)

.dropdown-menu {
  margin: 0;
}
.dropdown:hover > .dropdown-menu {
  display: block;
}
@diaolizhi

This comment has been minimized.

Copy link

diaolizhi commented May 9, 2019

$('.dropdown-toggle').hover(function () { $(this).trigger('click').toggleClass("disabled"); });
I think that's better

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.