Bootstrap Dropdown in the header opens on hover instead of click [#3556654]

Problem/Motivation

The dropdown has an extra hover-based behavior applied via the CSS rule:

.dropdown:hover > .dropdown-menu {
  display: block;
}

This duplicates the default click-based behavior. As a result, the dropdown opens both on hover and on click, which leads to inconsistent and glitchy UI interaction.

Steps to reproduce

1. Place a dropdown (e.g., language selector) in the header.
2. Move the cursor over it: the menu opens.
3. Click the dropdown toggle: the menu state conflicts with the hover behavior and does not collapse reliably.

Proposed resolution

Remove the hover-based rule to ensure the dropdown state is controlled only by click. This restores the expected Bootstrap/standard dropdown behavior.

Issue fork flexistyle_bootstrap-3556654

Show commands

Start within a Git clone of the project using the version control instructions.

Add & fetch this issue fork’s repository

Or, if you do not have SSH keys set up on git.drupalcode.org:

Add & fetch this issue fork’s repository

3556654-dropdown-menu-hover changes, plain diff MR !15
Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

7 November 2025 at 13:27

kir lazur created an issue. See original summary.

Comment #2

7 November 2025 at 17:25

kir lazur opened merge request !15

Comment #3

kir lazur commented 10 November 2025 at 16:07

Issue summary:

View changes

Comment #4

murz

English

Yerevan, Armenia

commented 11 November 2025 at 05:11

Status:

Active

» Reviewed & tested by the community

Faced this bug too, when we add any Bootstrap Dropdown to the page, it starts to behave wrong: instead of "onclick" it opens on the hover, because of this CSS override. The MR fixes the issue well, so marking as RTBC.

By the way, we also have this CSS, related to dropdowns above the removed rules:

.header-style-3 .dropdown > .dropdown-menu {
  display: block;
}

Do we really need it? I think it's better to keep the default Bootstrap Dropdown behavior, and use Bootstrap-related classes in Twig, instead of overriding the behavior by CSS.