Hello, I need to have a menu item produce a dropdown with its sub-items, so I set the link for this menu item to route: and placed the sub-items under it in the menu structure.

This seemed to work well, it produced a menu item that showed the dropdown menu on hover, but then I noticed that on mobile it didn't open the dropdown on the first touch/click. After that, it works fine. Each touch/click opens/closes it as expected, but... first time is the most important, of course, users shouldn't be expected to click the same thing over and over.
So I searched, and discovered that Bootstrap is supposed to have dropdowns work on click by default, but mine is on hover by default. I don't think I've touched anything related to that, I just found myself with it being that way. And I don't know if switching to dropdown on click would fix the issue.

The following is the code I get for that main menu item after loading the page and just opening the main menu:

<li class="expanded dropdown first">
  <span class="dropdown-toggle" data-toggle="dropdown">Services<span class="caret"></span></span>
  <ul class="dropdown-menu">
    <li class="first">
      <a href="/page1" data-drupal-link-system-path="node/8">page 1</a>
    </li>
    <li>
      <a href="/page2" data-drupal-link-system-path="node/9">page 2</a>
    </li>
    <li class="last">
      <a href="/page3" data-drupal-link-system-path="node/10">page 3</a>
    </li>
  </ul>
</li>

When I click it the first time, the SPAN with class "dropdown-toggle" gets a
aria-expanded="false"
added to it.

Another click, will set it to
aria-expanded="true"
and the LI with classes "expanded dropdown" gets the "open" additional class.

Further clicks close and reopen the dropdown normally, as I said above, changing those properties accordingly.

In my search, I also found other things, such as someone saying they had bootstrap.js loading twice, causing issues, but I verified and I only have it once.

So, any idea or advice on where I should look and what I should do to solve this?

Comments

EDA01 created an issue. See original summary.

EDA01’s picture

EDA01 CreditAttribution: EDA01 commented
Issue summary: View changes
markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented
Assigned: EDA01 » Unassigned
Status: Active » Closed (works as designed)
Issue tags: -Drupal 8.x, -menu, -dropdown, -hover, -click
Related issues: +#1893532: [bootstrap][policy][7.x-3.x] Navigation/Menus

Ensure all your top-level menu items are set to expand. Otherwise, they will only expand if they're part of the active trail.

EDA01’s picture

EDA01 CreditAttribution: EDA01 commented

Hi, I checked the checkbox for "Expand all menu items" in the menu block's configuration, but the behavior is unchanged (and still I have no idea why hover is the default behavior I get). Any other suggestion?

magoomby2’s picture

magoomby2 CreditAttribution: magoomby2 commented

I had a similar problem using Bootstrap Barrio with Bootstrap SASS subtheme. Solved it by adding/changing my THEME.info.yml:

libraries-override:
  bootstrap_barrio/global-styling: true
  bootstrap_sass/global-styling: true
  bootstrap_barrio/file: true
  bootstrap_sass/file: true

change my THEME.ibraries.yml and add/point to bootstrap.bundle.min.js explicitly:

global-styling:
  version: VERSION
  js: 
    js/bootstrap.bundle.min.js: {}
    js/barrio.js: {}
    js/custom.js: {}
  css:
    component:
      css/style.css: {}
  dependencies:
    - core/jquery
    - core/drupal

Go into /admin/appearance/settings/bootstrap_barrio and change 'Load library' to None.
Go into /admin/appearance/settings/THEME and change 'Load library' to None.
Flush cache.
Menu works on one click.

For me, the simplicity here was specifying which bootstrap library to load in one place: my theme's libraries yaml config and not (possibly) anywhere/everywhere else it might be loaded before/after mine.

amagan’s picture

amagan CreditAttribution: amagan commented

In my case with these data it has not been possible to solve the error.

On the other hand I tried to add a show class in the elements that are greater than level 0 in the menu--main.html.twig file.

{%
set link_classes = [
not menu_level ? 'nav-link',
item.in_active_trail ? 'active',
item.below ? 'dropdown-toggle',
item.url.getOption('attributes').class ? item.url.getOption('attributes').class | join(' '),
'nav-link-' ~ item.url.toString() | clean_class,
menu_level > 0 ? 'show'
]
%}