Contrib.social

Main nav submenus fire on click rather than hover

Open on Drupal.org →
Created on 27 February 2024, about 1 year ago

On my main navigation, I had the submenus triggering using click rather than hover for a variety of reasons.
On the 2.0.1 cleanup, console started to produce: i.createPopper is not a function errors (I believe popper was removed from D10 core). The menus would only open on hover.

I had to create a subtheme and add: //cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js to include bootstrap with popper but now it is calling both:
//cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js and //cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js

However, I can now get my menus to trigger on click again since the bundle with popper is loading. I read that Bootstrap has dropdowns explicitly triggering on click and not on hover (https://getbootstrap.com/docs/5.3/components/dropdowns/#overview). Wondering why main nav isn't implemented as such in Belgrade and is there a way to use this native functionality rather than by me adding the bundle (popper) and additional css. I'm not a developer so just trying to piece this together.

💬 Support request
Status

Active

Version

2.0

Component

User interface

Created by

🇺🇸United States djween

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @djween
  • Comment about 1 year ago →
    🇷🇸Serbia majmunbog

    Thanks @djween for bringing up this issue.
    I don't think that Popper.js was ever included in core. The Belgrade CSS is responsible for displaying the dropdowns on hover.

    I agree that the dropdowns should be opening on click. However, according to the Belgrade design, the main menu is intended to open on hover.

    I'm currently considering two options:

    1. Specifying hover-based dropdown CSS exclusively for this menu.
    2. Implementing theme settings to toggle the global dropdown behavior between hover and click.
  • Assigned to sandip poddar
  • Comment 27 days ago →
    sandip poddar

    Implementing theme settings to toggle the global dropdown behavior between hover and click.

    I am trying to implement this approach.

  • Comment 25 days ago →
    sandip poddar

    Hi @majmunbog,

    While working on this issue, I noticed that the child menu items are not visible on hover. I also checked the "Show as expanded" option, but the nav-item--expanded class is still not being attached instead nav-item--collapsed is attaching with the

  • element. I verified this by dumping the classes variable in the menu.html.twig.

    Could you please share your feedback on this? Let me know if there's anything specific I should check or adjust before proceeding further.

    Looking forward to your guidance.

  • Comment 9 days ago →
    🇬🇷Greece denizserhat

    Since there is no mouse navigation on the phone, the main menu opens when trying to open submenus with a finger. How can we fix this?

    • contrib.social Blog FAQ Discussions
    Production build 0.71.5 2024