Open Menu Dropdowns on Hover

NOTE: As of version 1.6 this page is depricated. Dropdowns now open on hover by default.

---

By default, dropdown menus open on click. Why our theme uses click-to-open menus: http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/#behavior

If you wish to customize your sub-theme so dropdown menus open on hover, here are instructions for a simple CSS-only implementation.

Sub-Theme

Please be sure to make these modifications in a sub-theme.

Add is-hoverable class to dropdown item

Duplicate the menu--main.html.twig template file and place in your sub-theme's template directory. This will override the base-theme's menu template.

How to add the CSS class is-hoverable to a menu item if it has children:

Find:

{%
  set classes = [
    menu_level ? 'dropdown-item isu-dropdown-item' : 'nav-item',
    item.is_expanded ? 'menu-item--expanded',
    item.is_collapsed ? 'menu-item--collapsed',
    item.in_active_trail ? 'active',
    item.below ? 'dropdown',
  ]
%}

Change to

{%
  set classes = [
    menu_level ? 'dropdown-item isu-dropdown-item' : 'nav-item',
    item.is_expanded ? 'menu-item--expanded',
    item.is_collapsed ? 'menu-item--collapsed',
    item.in_active_trail ? 'active',
    item.below ? 'dropdown is-hoverable',
  ]
%}

Use CSS to open the dropdown menu on hover

Add this CSS rule to your sub-theme's CSS file:

@media (min-width: 992px) {
  .dropdown.is-hoverable:hover > .dropdown-menu {
    display: block;
  }
}

Notes

1. This technique preserves keyboard navigability, and does not affect how the menu works on mobile.
2. You may use your own class in place of is-hoverable.
3. Learn about Drupal 8 template suggestions to apply this technique only to certain menus: https://www.drupal.org/docs/8/theming/twig/working-with-twig-templates
4. This technique is just a suggestion and may not fit all needs. Researching hoverable dropdowns for Bootstrap 4 may be helpful.