How to implement a Navbar Dropdown Hover in Bootstrap v4

Question

I am a bit confused on the new bootstrap version since they changed dropdown menus to divs    lt nav class  navbar navbar-toggleable-md navbar-light bg-faded  gt     lt 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  gt       lt span class  navbar-toggler-icon  gt  lt  span gt     lt  button gt     lt a class  navbar-brand  href     gt Navbar lt  a gt     lt div class  collapse navbar-collapse  id  navbarNavDropdown  gt       lt ul class  navbar-nav  gt         lt li class  nav-item active  gt           lt a class  nav-link  href     gt Home  lt span class  sr-only  gt  current  lt  span gt  lt  a gt         lt  li gt         lt li class  nav-item  gt           lt a class  nav-link  href     gt Features lt  a gt         lt  li gt         lt li class  nav-item  gt           lt a class  nav-link  href     gt Pricing lt  a gt         lt  li gt         lt li class  nav-item dropdown  gt           lt a class  nav-link dropdown-toggle  href  http   example com  id  navbarDropdownMenuLink  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt            Dropdown link          lt  a gt           lt div class  dropdown-menu  aria-labelledby  navbarDropdownMenuLink  gt             lt a class  dropdown-item  href     gt Action lt  a gt             lt a class  dropdown-item  href     gt Another action lt  a gt             lt a class  dropdown-item  href     gt Something else here lt  a gt           lt  div gt         lt  li gt       lt  ul gt     lt  div gt   lt  nav gt    Do you guys have any idea to get a hover dropdown in the Dropdown link in that snippet without adding additional script code  only css and script from bootstrap   I already saw the bootstrap css classes and I can t relate with the ones in bootstrap V3  I accomplish this without adding jquery in V3

User · Answer

I had already used and styled a navbar when I was requested to change it to a hover interaction instead, so ended up with this as a fix using jQuery.

function bootstrapHoverMenu (bp = 768) {

  // close all dropdowns that are open
    $('body').click( function (e) {
    $('.dropdown-menu.show').removeClass('show');
  });

  // show dropdown for the link clicked
  $('.nav-item').hover(function (e) {
    $('.dropdown-menu.show').removeClass('show');
    if(( $(window).width() >= bp )) {
      $dd = $(this).find('.dropdown-menu');
      $dd.addClass('show');
    }
  });

  // get href for top level link if clicked and open
  $('.dropdown').click(function (e) {
    if( $(window).width() < bp ) {
      $('.dropdown-menu').css({'display': 'none'});
    }
    $href = $(this).find('.nav-link').attr('href');
    window.open($href, '_self');
  });
}

$(document).ready( function() {
   // when page ready run the fix
   bootstrapHoverMenu();
});

Downside is mobile only has top level links.

User · Answer

Just Add this simple css code in your style-sheet and you are ready to go    dropdown hover  gt   dropdown-menu       display  block     dropdown  gt   dropdown-toggle active         Without this  clicking will make it sticky       pointer-events  none

User · Answer

lt div style  width  100   overflow  scroll   gt  lt table class  table table-striped table-bordered  style  font-size 12px  gt

User · Answer

CSS and Desktop only solution   media  min-width  992px      dropdown hover gt  dropdown-menu     display  block

User · Answer

I couldn t find here the full solution  So  it s my one which works with Bootstrap v4 4 1 and has the next benefits   A click on the dropdown-toggle works as a normal nav link   Supports any nesting level of dropdown menus   Bootstrap 4  show shown hide hidden  bs dropdown events work well      Toggles a B4 dropdown-menu to a given state   const toggleDropdownElement     dropdown  shouldOpen   false    gt       const  dropdownToggle    dropdown children   data-toggle  quot dropdown quot    a       const  dropdownMenu    dropdown children   dropdown-menu           Change the dropdown menu  It s similar to B4 Dropdown show    hide    see  bootstrap js src dropdown js     if  shouldOpen          dropdown trigger  show bs dropdown          dropdownToggle attr  aria-expanded   true  focus          dropdownMenu addClass  show          dropdown addClass  show   trigger   Event  shown bs dropdown    dropdownMenu 0          else         dropdown trigger  hide bs dropdown          dropdownToggle attr  aria-expanded   false         dropdownMenu removeClass  show          dropdown removeClass  show   trigger   Event  hidden bs dropdown    dropdownMenu 0                   Toggles a B4 dropdown-menu with any nesting level   const toggleDropdown    event    gt       const  dropdown     event target  closest   dropdown       const  parentDropdownMenu    dropdown closest   dropdown-menu       const shouldOpen   event type      click   amp  amp   dropdown is   hover           If the dropdown was closed already  break the  mouseleave  event cascade     if   shouldOpen  amp  amp    dropdown hasClass  show    return         Change the current dropdown menu  last nested      toggleDropdownElement  dropdown  shouldOpen          We have to close the dropdown menu tree if it was a click or the menu was leave at all     if  event type      click      parentDropdownMenu length  amp  amp    parentDropdownMenu is   hover            dropdown parents   dropdown   each  index  element    gt           toggleDropdownElement   element   false                       if  viewport  amp  amp  viewport is   gt  xl            body         on  mouseenter mouseleave     dropdown   toggleDropdown        on  click     dropdown-menu a   toggleDropdown          Disable the default B4 s click  Other words  change a dropdown-toggle to a normal nav link       document  off  click bs dropdown     data-toggle  quot dropdown quot           document  off  click bs dropdown data-api     data-toggle  quot dropdown quot         Not sure about it        If you don t use ES6 just change arrow functions to the old function style  Thanks   tao for your example  it was helpful for me  Code related links  B4 Dropdown Events  viewport  Responsive Bootstrap Toolkit   WP Bootstrap Navwalker

User · Answer

Bootstrap v4 Solution - jQuery based  but better than a pure css solution  This ensures that you can still follow top level link clicks and is compatible with mobile   This was built with desktop and mobile in mind  Fell free to wrap the jQuery with a conditional that checks if the window width is greater than 768px  jQuery     Dropdown on hover       quot  nav-link dropdown-toggle quot   hover  function             Open up the dropdown       this  removeAttr  data-toggle       remove the data-toggle attribute so we can click and follow link       this  parent   addClass  show       add the class show to the li parent       this  next   addClass  show       add the class show to the dropdown div sibling    function             on mouseout check to see if hovering over the dropdown or the link still     var isDropdownHovered     this  next   filter  quot  hover quot   length     check the dropdown for hover - returns true of false     var isThisHovered     this  filter  quot  hover quot   length      check the top level item for hover     if isDropdownHovered    isThisHovered               still hovering over the link or the dropdown       else              no longer hovering over either - lets remove the  show  classes           this  attr  data-toggle    dropdown       put back the data-toggle attr           this  parent   removeClass  show              this  next   removeClass  show                 Check the dropdown on hover    quot  dropdown-menu quot   hover  function         function         var isDropdownHovered     this  prev   filter  quot  hover quot   length     check the dropdown for hover - returns true of false     var isThisHovered    this  filter  quot  hover quot   length      check the top level item for hover     if isDropdownHovered    isThisHovered               do nothing - hovering over the dropdown of the top level link       else              get rid of the classes showing it           this  parent   removeClass  show              this  removeClass  show               CSS  media min-width   768px       dropdown-menu       margin-top  0     fixes closing on slow mouse transition

User · Answer

1  Remove data-toggle  dropdown  attribute  so click will not open dropdown menu   2  Add  hover pseudo-class to show dropdown-menu   x000D   x000D   dropdown hover  dropdown-menu  display  block   x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 4 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs popper js 1 14 7 umd popper min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 3 1 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt nav class  navbar navbar-toggleable-md navbar-light bg-faded  gt  x000D     lt 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  gt  x000D       lt span class  navbar-toggler-icon  gt  lt  span gt  x000D     lt  button gt  x000D     lt a class  navbar-brand  href     gt Navbar lt  a gt  x000D     lt div class  collapse navbar-collapse  id  navbarNavDropdown  gt  x000D       lt ul class  navbar-nav  gt  x000D         lt li class  nav-item active  gt  x000D           lt a class  nav-link  href     gt Home  lt span class  sr-only  gt  current  lt  span gt  lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item dropdown  gt  x000D           lt a class  nav-link dropdown-toggle  href  http   example com  id  navbarDropdownMenuLink  aria-haspopup  true  aria-expanded  false  gt  x000D            Dropdown link x000D           lt  a gt  x000D           lt div class  dropdown-menu  aria-labelledby  navbarDropdownMenuLink  gt  x000D             lt a class  dropdown-item  href     gt Action lt  a gt  x000D             lt a class  dropdown-item  href     gt Another action lt  a gt  x000D             lt a class  dropdown-item  href     gt Something else here lt  a gt  x000D           lt  div gt  x000D         lt  li gt  x000D         lt li class  nav-item  gt  x000D           lt a class  nav-link  href     gt Features lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item  gt  x000D           lt a class  nav-link  href     gt Pricing lt  a gt  x000D         lt  li gt  x000D       lt  ul gt  x000D     lt  div gt  x000D   lt  nav gt  x000D   x000D   x000D

User · Answer

x000D   x000D     body   on  mouseenter mouseleave    dropdown  function e   x000D    var  d   e target  closest   dropdown    x000D    if  e type      mouseenter   d addClass  show    x000D    setTimeout function    x000D       d toggleClass  show    d is   hover     x000D          data-toggle  dropdown      d  attr  aria-expanded   d is   hover     x000D      300   x000D      x000D   x000D     this is not needed  just prevents page reload when a dd link is clicked    x000D      dropdown a   on  click tap   e   gt  e preventDefault    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  https   code jquery com jquery-3 1 1 slim min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs tether 1 4 0 js tether min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt nav class  navbar navbar-toggleable-md navbar-light bg-faded  gt  x000D     lt 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  gt  x000D       lt span class  navbar-toggler-icon  gt  lt  span gt  x000D     lt  button gt  x000D     lt a class  navbar-brand  href gt Navbar lt  a gt  x000D     lt div class  collapse navbar-collapse  id  navbarNavDropdown  gt  x000D       lt ul class  navbar-nav  gt  x000D         lt li class  nav-item active  gt  x000D           lt a class  nav-link  href gt Home  lt span class  sr-only  gt  current  lt  span gt  lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item  gt  x000D           lt a class  nav-link  href gt Features lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item  gt  x000D           lt a class  nav-link  href gt Pricing lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item dropdown  gt  x000D           lt a class  nav-link dropdown-toggle  href id  navbarDropdownMenuLink  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt  x000D            Dropdown link x000D           lt  a gt  x000D           lt div class  dropdown-menu  aria-labelledby  navbarDropdownMenuLink  gt  x000D             lt a class  dropdown-item  href gt Action lt  a gt  x000D             lt a class  dropdown-item  href gt Another action lt  a gt  x000D             lt a class  dropdown-item  href gt Something else here lt  a gt  x000D           lt  div gt  x000D         lt  li gt  x000D       lt  ul gt  x000D     lt  div gt  x000D   lt  nav gt  x000D   x000D   x000D

User · Answer

I use bootstrap 4 0 0 since we want to simulate  show to hover event  it simply easy  just add all styles in  dropdown show  dropdown-menu to the  hover  like this    dropdown hover gt  dropdown-menu     opacity  1    visibility  visible    transform  translate3d 0px  0px  0px

User · Answer

Google brought me here but    The examples provided work if the dropdown menu is overlaping  at least by 1px  with its parent when show  If not  it loses focus and nothing works as intended  Here is a working solution with jQuery and Bootstrap 4 5 2      li nav-item   mouseenter function  e             e stopImmediatePropagation             if    this  hasClass  dropdown                      target element containing dropdowns  show it               this  addClass  show                  this  find   dropdown-menu   addClass  show                    Close dropdown on mouseleave                 dropdown-menu   mouseleave function  e                    e stopImmediatePropagation                      this  removeClass  show                                    If you have a prenav above  this clears open dropdowns  since you probably will hover the nav-item going up and it will reopen its dropdown otherwise                  prenav   off   mouseenter function  e                    e stopImmediatePropagation                        dropdown-menu   removeClass  show                               else                  unset open dropdowns if hover is on simple nav element                 dropdown-menu   removeClass  show

User · Answer

Bootstrap s functionality appears to have changed slightly since v4 has been released   The  dropdown-menu item appears to also now get the  show class in addition to the  dropdown   I adapted Andrei s answer to also toggle the class on the  dropdown-menu   Note that the CSS is no longer necessary and the HTML is the same except I updated the links to the current versions and the nav class changed to navbar-expand-md    x000D   x000D     body   on  mouseenter mouseleave     dropdown   function  e    x000D      var dropdown     e target  closest   dropdown    x000D      var menu       dropdown-menu   dropdown   x000D      dropdown addClass  show    x000D      menu addClass  show    x000D      setTimeout function      x000D          dropdown dropdown is   hover      addClass     removeClass    show    x000D          menu dropdown is   hover      addClass     removeClass    show    x000D         300   x000D      x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0 css bootstrap min css  integrity  sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW dAiS6JXm  crossorigin  anonymous  gt  x000D   lt script src  https   code jquery com jquery-3 2 1 min js  integrity  sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4   crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0 js bootstrap min js  integrity  sha384-JZR6Spejh4U02d8jOt6vLEHfe JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl  crossorigin  anonymous  gt  lt  script gt  x000D   lt nav class  navbar navbar-expand-md navbar-light bg-faded  gt  x000D     lt 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  gt  x000D       lt span class  navbar-toggler-icon  gt  lt  span gt  x000D     lt  button gt  x000D     lt a class  navbar-brand  href     gt Navbar lt  a gt  x000D     lt div class  collapse navbar-collapse  id  navbarNavDropdown  gt  x000D       lt ul class  navbar-nav  gt  x000D         lt li class  nav-item active  gt  x000D           lt a class  nav-link  href     gt Home  lt span class  sr-only  gt  current  lt  span gt  lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item  gt  x000D           lt a class  nav-link  href     gt Features lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item  gt  x000D           lt a class  nav-link  href     gt Pricing lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item dropdown  gt  x000D           lt a class  nav-link dropdown-toggle  href  http   example com  id  navbarDropdownMenuLink  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt  x000D            Dropdown link x000D           lt  a gt  x000D           lt div class  dropdown-menu  aria-labelledby  navbarDropdownMenuLink  gt  x000D             lt a class  dropdown-item  href     gt Action lt  a gt  x000D             lt a class  dropdown-item  href     gt Another action lt  a gt  x000D             lt a class  dropdown-item  href     gt Something else here lt  a gt  x000D           lt  div gt  x000D         lt  li gt  x000D       lt  ul gt  x000D     lt  div gt  x000D   lt  nav gt  x000D   x000D   x000D

User · Answer

Hoverable dropdown without losing functionality of popper js for bootstrap 4 only  Javascript      dropdown-hoverable   hover function          this  children   data-toggle  dropdown     click       function          this  children   data-toggle  dropdown     click          HTML   lt nav class  nav  gt     lt li class  nav-item dropdown dropdown-hoverable  gt       lt a class  nav-link dropdown-toggle  role  button  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  href     gt Menu link lt  a gt       lt ul class  dropdown-menu  gt       lt  ul gt     lt  li gt   lt  nav gt

User · Answer

Andrei s  complete  jQuery CSS solution has the right intent  but it s verbose and still incomplete  Incomplete because while it probably covers all the necessary DOM changes  it s missing the firing of custom events  Verbose because it s wheel-reinventing when Bootstrap already provides the dropdown   method  which does everything   So the correct  DRY solution  which does not rely on the CSS hack often repeated among other answers  is just jQuery      body   on  mouseover mouseout     dropdown   function e          e target  dropdown  toggle

User · Answer

CSS solutions not working properly on touch device  I found that any CSS solutions made the menu stay open on touch devices  they didn t collapse anymore  So I read the article  https   www brianshim com webtricks drop-down-menus-on-ios-and-android   by Brian Shim  Very useful  It states that a touch device always first checks the existence of a hover class on an element  But  by using jQuery  show   you introduce a style attribute  display block   that makes the menu open up on first touch  Now the menu has opened without the bootstrap  show  class  If a user chooses a link from the dropdown menu it works perfectly  But if a user decides to close the menu without using it he has to tap twice to close the menu  At the first tap the original bootstrap  show  class gets attached so the menu opens up again  at the second tap the menu closes due to normal bootstrap behaviour  removal of  show  class    To prevent this I used the article  https   codeburst io the-only-way-to-detect-touch-with-javascript-7791a3346685  by David Gilbertson   He has some very handy ways of detecting touch or hover devices   So  combined the two authors with a bit jQuery of my own     window  one  mouseover   function          window USER CAN HOVER   true        if USER CAN HOVER             jQuery   navbarNavDropdown ul li dropdown   on  mouseover   function                  var  parent   jQuery this                var  dropdown    parent children  ul                   dropdown show 200 function                      parent mouseleave function                      var  this   jQuery this                     this children  ul   fadeOut 200                                                                    Check once if a device allows a hover event  If it does  introduce the possibility to hover using  show    If the device doesn t allow a hover event  the  show   never gets introduced so you get natural bootstrap behaviour on touch device    Be sure to remove any CSS regarding menu hover classes   Took me three days    so I hope it helps some of you

User · Answer

Simple  CSS only solution     dropdown hover gt  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          x000D   x000D     body   on  mouseenter mouseleave    dropdown  function e   x000D    var  d   e target  closest   dropdown    x000D    if  e type      mouseenter   d addClass  show    x000D    setTimeout function    x000D       d toggleClass  show    d is   hover     x000D          data-toggle  dropdown      d  attr  aria-expanded   d is   hover     x000D      300   x000D      x000D   x000D     this is not needed  just prevents page reload when a dd link is clicked    x000D      dropdown a   on  click tap   e   gt  e preventDefault    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  https   code jquery com jquery-3 1 1 slim min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs tether 1 4 0 js tether min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt nav class  navbar navbar-toggleable-md navbar-light bg-faded  gt  x000D     lt 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  gt  x000D       lt span class  navbar-toggler-icon  gt  lt  span gt  x000D     lt  button gt  x000D     lt a class  navbar-brand  href gt Navbar lt  a gt  x000D     lt div class  collapse navbar-collapse  id  navbarNavDropdown  gt  x000D       lt ul class  navbar-nav  gt  x000D         lt li class  nav-item active  gt  x000D           lt a class  nav-link  href gt Home  lt span class  sr-only  gt  current  lt  span gt  lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item  gt  x000D           lt a class  nav-link  href gt Features lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item  gt  x000D           lt a class  nav-link  href gt Pricing lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item dropdown  gt  x000D           lt a class  nav-link dropdown-toggle  href id  navbarDropdownMenuLink  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt  x000D            Dropdown link x000D           lt  a gt  x000D           lt div class  dropdown-menu  aria-labelledby  navbarDropdownMenuLink  gt  x000D             lt a class  dropdown-item  href gt Action lt  a gt  x000D             lt a class  dropdown-item  href gt Another action lt  a gt  x000D             lt a class  dropdown-item  href gt Something else here lt  a gt  x000D           lt  div gt  x000D         lt  li gt  x000D       lt  ul gt  x000D     lt  div gt  x000D   lt  nav gt  x000D   x000D   x000D      v4 1 2 shiplist introduced this change to how dropdowns work  making the solution above no longer work  Here s the up to date solution for having the dropdown open on hover in v4 1 2 and above   function toggleDropdown  e      const  d     e target  closest   dropdown         m       dropdown-menu    d     setTimeout function        const shouldOpen   e type      click   amp  amp   d is   hover         m toggleClass  show   shouldOpen        d toggleClass  show   shouldOpen           data-toggle  dropdown      d  attr  aria-expanded   shouldOpen        e type      mouseleave    300   0         body      on  mouseenter mouseleave    dropdown  toggleDropdown     on  click     dropdown-menu a   toggleDropdown      x000D   x000D  function toggleDropdown  e    x000D    const  d     e target  closest   dropdown    x000D         m       dropdown-menu    d   x000D    setTimeout function    x000D      const shouldOpen   e type      click   amp  amp   d is   hover    x000D       m toggleClass  show   shouldOpen   x000D       d toggleClass  show   shouldOpen   x000D          data-toggle  dropdown      d  attr  aria-expanded   shouldOpen   x000D       e type      mouseleave    300   0   x000D    x000D   x000D     body   x000D     on  mouseenter mouseleave    dropdown  toggleDropdown  x000D     on  click     dropdown-menu a   toggleDropdown   x000D   x000D     not needed  prevents page reload for SO example on menu link clicked    x000D      dropdown a   on  click tap   e   gt  e preventDefault    x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 1 3 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  https   code jquery com jquery-3 3 1 slim min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs popper js 1 14 3 umd popper min js  gt  lt  script gt  x000D   lt script src  https   stackpath bootstrapcdn com bootstrap 4 1 3 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt nav class  navbar navbar-expand-lg navbar-light bg-light  gt  x000D     lt a class  navbar-brand  href     gt Navbar lt  a gt  x000D     lt button class  navbar-toggler  type  button  data-toggle  collapse  data-target   navbarSupportedContent  aria-controls  navbarSupportedContent  aria-expanded  false  aria-label  Toggle navigation  gt  x000D       lt span class  navbar-toggler-icon  gt  lt  span gt  x000D     lt  button gt  x000D   x000D     lt div class  collapse navbar-collapse  id  navbarSupportedContent  gt  x000D       lt ul class  navbar-nav mr-auto  gt  x000D         lt li class  nav-item active  gt  x000D           lt a class  nav-link  href     gt Home  lt span class  sr-only  gt  current  lt  span gt  lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item  gt  x000D           lt a class  nav-link  href     gt Link lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item dropdown  gt  x000D           lt a class  nav-link dropdown-toggle  href     id  navbarDropdown  role  button  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt  x000D            Dropdown x000D           lt  a gt  x000D           lt div class  dropdown-menu  aria-labelledby  navbarDropdown  gt  x000D             lt a class  dropdown-item  href     gt Action lt  a gt  x000D             lt a class  dropdown-item  href     gt Another action lt  a gt  x000D             lt div class  dropdown-divider  gt  lt  div gt  x000D             lt a class  dropdown-item  href     gt Something else here lt  a gt  x000D           lt  div gt  x000D         lt  li gt  x000D         lt li class  nav-item  gt  x000D           lt a class  nav-link disabled  href     gt Disabled lt  a gt  x000D         lt  li gt  x000D       lt  ul gt  x000D       lt form class  form-inline my-2 my-lg-0  gt  x000D         lt input class  form-control mr-sm-2  type  search  placeholder  Search  aria-label  Search  gt  x000D         lt button class  btn btn-outline-success my-2 my-sm-0  type  submit  gt Search lt  button gt  x000D       lt  form gt  x000D     lt  div gt  x000D   lt  nav gt  x000D   x000D   x000D      Important note  If using the jQuery solution  it is important to remove the CSS one  or the dropdown won t close when  dropdown-toggle is clicked or when an menu option is clicked

User · Answer

This solution switches on and off   lt script gt    document  ready function          close all dropdowns that are open      body   click function e              nav-item show   removeClass  show                nav-item clicked   removeClass  clicked              dropdown-menu show   removeClass  show                 nav-item   click  function e          this  addClass  clicked               show dropdown for the link clicked       nav-item   hover function e          if      nav-item show   length  lt  1                nav-item clicked   removeClass  clicked                  if      nav-item clicked   length  lt  1                  nav-item show   removeClass  show                  dropdown-menu show   removeClass  show               dd     this  find   dropdown-menu               dd parent   addClass  show               dd addClass  show                      lt  script gt    To disable the hover for lg sized collapse menus add  if     window  width    gt   992

User · Answer

June 2020  I found this solution and I thought I should post it here   Bootstrap version  4 3 1  The CSS part    navbar  nav-item not  last-child      margin-right  35px      dropdown-toggle  after      transition  transform 0 15s linear      show dropdown  dropdown-toggle  after     transform  translateY 3px       dropdown-menu     margin-top  0      The jQuery part   const  dropdown       dropdown    const  dropdownToggle       dropdown-toggle    const  dropdownMenu       dropdown-menu    const showClass    show      window  on  load resize   function       if  this matchMedia   min-width  768px    matches         dropdown hover        function             const  this     this            this addClass showClass            this find  dropdownToggle  attr  aria-expanded    true             this children  dropdownMenu  addClass showClass                  function             const  this     this            this removeClass showClass            this find  dropdownToggle  attr  aria-expanded    false             this children  dropdownMenu  removeClass showClass                      else        dropdown off  mouseenter mouseleave              Source  https   webdesign tutsplus com tutorials how-to-make-the-bootstrap-navbar-dropdown-work-on-hover--cms-33840

User · Answer

Bootstrap 4 CSS-only  None of the CSS only answers work entirely  Either the dropdown menu stays open after click  or there is a gap that makes the dropdown menu hide before you can reach the menu links to click   Here s the simple CSS only solution    navbar-nav li hover  dropdown-menu       display  block      Remove data-toggle dropdown from the HTML markup to prevent the dropdown staying open in click  Use mt-0  margin-top 0  to eliminate the gap above the menu  and make it possible to hover the menu items   Demo https   www codeply com go awyU7VTIJf    Complete Code       navbar-nav li hover  dropdown-menu           display  block              lt nav class  navbar navbar-expand-lg navbar-light bg-light  gt                  lt div class  collapse navbar-collapse  id  navbarSupportedContent  gt           lt ul class  navbar-nav mr-auto  gt             lt li class  nav-item dropdown  gt               lt a class  nav-link dropdown-toggle  href     id  navbarDropdown  gt                Dropdown              lt  a gt               lt div class  dropdown-menu mt-0  aria-labelledby  navbarDropdown  gt                 lt a class  dropdown-item  href     gt Action lt  a gt                 lt a class  dropdown-item  href     gt Another action lt  a gt                 lt div class  dropdown-divider  gt  lt  div gt                 lt a class  dropdown-item  href     gt Something else here lt  a gt               lt  div gt             lt  li gt           lt  ul gt         lt  div gt       lt  nav gt

User · Answer

I think this simply just work with bootstrap 4  i adding in inline but you always can bind event from script      lt a  onmouseover      navbarDropdownMenuLink   dropdown  toggle    class  nav-link dropdown-toggle   href  http   example com   id  navbarDropdownMenuLink   data-toggle  dropdown   aria-haspopup  true   aria-expanded  false  gt        Dropdown link      lt  a gt

User · Answer

Neither of the top solutions worked for me   This works perfectly  keeps submenus open while browsing  add uses the native Bootstrap javascript      Mouse over    body   on  mouseover     dropdown   function e           this  children   dropdown-toggle   dropdown  show            Mouse leave    body   on  mouseleave     dropdown   function e           this  children   dropdown-toggle   dropdown  hide

[html] How to implement a Navbar Dropdown Hover in Bootstrap v4?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap