After the update, the drop-down menus no longer open

Hi Alex,

Thanks for reporting this. Could you please share a bit more information so we can reproduce it?

Which Drupal core version are you using?
Which DXPR Theme version did you update from, and did you update to 8.1.3?
Which Bootstrap5 theme version is installed?
Are there any JavaScript errors in the browser console?
Does this happen for all dropdown menus or only specific ones?
If possible, please share a link to the affected site or screenshots/video of the issue.

Thanks!

Hi,

I'm experiencing the same issue as Alex. Below are my details:

1 - Core 11.4.4
2 - I updated from 8.1.2 to 8.1.3
3 - Using Bootstrap5 4.0.8
4 - The javascript error I get when clicking on the dropdown are:

Uncaught TypeError: Cannot read properties of null (reading 'classList')
at Qi._isShown (js_eF1a2KElPiQpL8aJLpdrm09vg_IaCqphDe9Q3D3sTDo.js?scope=footer&delta=0&language=en&theme=em_v8&include=eJxNylsKgDAMRNENGfxyPSU1wVZiU5r42r2CoP4N90xUdfOGdejjO2E2EHQ27-ioLcQ1C3H7HmF4wBMv3OPoeWO4Icu_c0lYRiagppV0L_bXSTSigPkpuUwXNiA1PA:15:44339)
at Qi.toggle (js_eF1a2KElPiQpL8aJLpdrm09vg_IaCqphDe9Q3D3sTDo.js?scope=footer&delta=0&language=en&theme=em_v8&include=eJxNylsKgDAMRNENGfxyPSU1wVZiU5r42r2CoP4N90xUdfOGdejjO2E2EHQ27-ioLcQ1C3H7HmF4wBMv3OPoeWO4Icu_c0lYRiagppV0L_bXSTSigPkpuUwXNiA1PA:15:42459)
at HTMLButtonElement. (js_eF1a2KElPiQpL8aJLpdrm09vg_IaCqphDe9Q3D3sTDo.js?scope=footer&delta=0&language=en&theme=em_v8&include=eJxNylsKgDAMRNENGfxyPSU1wVZiU5r42r2CoP4N90xUdfOGdejjO2E2EHQ27-ioLcQ1C3H7HmF4wBMv3OPoeWO4Icu_c0lYRiagppV0L_bXSTSigPkpuUwXNiA1PA:15:46965)
at HTMLDocument.n (js_eF1a2KElPiQpL8aJLpdrm09vg_IaCqphDe9Q3D3sTDo.js?scope=footer&delta=0&language=en&theme=em_v8&include=eJxNylsKgDAMRNENGfxyPSU1wVZiU5r42r2CoP4N90xUdfOGdejjO2E2EHQ27-ioLcQ1C3H7HmF4wBMv3OPoeWO4Icu_c0lYRiagppV0L_bXSTSigPkpuUwXNiA1PA:15:4326)

5 - Happens on desktop and mobile for any dropdown menu. Clicking or hovering doesn't work.

6 - https://dxpr-update-vumc-department-of-emergency-medicine.pantheonsite.io/

Thanks for the detailed report, @jo13sue (and @alex.kirk).

I was able to reproduce this on Drupal 11.4.4 with DXPR Theme 8.1.3 and Bootstrap5 4.0.x.

Root cause
The FOUC-prevention inline CSS added in 8.1.3:

.dxpr-theme-header ul.dropdown-menu { display: none; }

has higher specificity than Bootstrap’s `.dropdown-menu.show`, so dropdowns stay hidden even after JS adds the `.show` class. Downgrading to 8.1.2 restores the menus.

Fix
PR: https://github.com/dxpr/dxpr_theme/pull/836

Attached is an interim patch for 8.1.3. It changes the FOUC rule to:

.dxpr-theme-header ul.dropdown-menu:not(.show) { display: none; }

Please test the patch and report back. Thanks!

Hi,

The patch fixed the issue. But I'm noticing that when clicking the hamburger menu on mobile, it opens, but when you click it again it doesn't close. Is that also a theme issue or something on my end?

Hi @jo13sue,

Thanks for confirming the dropdown patch works, and for reporting the hamburger behaviour.

That mobile hamburger issue is separate from the FOUC dropdown fix. The patch only changes the inline rule for `.dxpr-theme-header ul.dropdown-menu` so open dropdowns are not kept at `display: none`. It does not affect `#dxpr-theme-menu-toggle` / `#dxpr-theme-main-menu` collapse behaviour. We also verified on your site that reverting the FOUC rule does not change the hamburger open/close problem.

I could not reproduce the hamburger bug on a clean Drupal 11.4.x install with stock DXPR Theme 8.1.3 + Bootstrap5: the mobile menu opens and closes correctly.

On https://dxpr-update-vumc-department-of-emergency-medicine.pantheonsite.io/ the behaviour looks site-specific. Things worth checking on your side:

- Custom/subtheme (`em_v8` appears in the aggregated JS URL) — any custom JS/CSS touching the header or navbar toggler
- Possible double Bootstrap Collapse handling on the hamburger click (hide then immediately show)
- JS aggregation / libraries attached more than once (base theme + subtheme, or extra frontend scripts)
- Custom JS that also binds to `#dxpr-theme-menu-toggle` or Collapse

Could you please open a new issue for the hamburger problem (this issue can stay focused on the dropdown FOUC fix), and include:

- Whether it happens with stock DXPR Theme (no custom subtheme)
- Exact DXPR Theme / Bootstrap5 / core versions
- Steps to reproduce on a minimal setup if possible
- Console errors (if any)
- Whether it still happens with JS aggregation disabled

Thanks!

Hi @alex.kirk,

Thanks for the update and the site link.

Just to clarify, two different behaviours were discussed in this issue:

1. Desktop: dropdown/submenu does not open
2. Mobile: hamburger opens the menu, but a second click does not close it

I tested https://www.evangelici.info/ and I currently cannot reproduce either of those problems there (desktop dropdowns open, and the mobile hamburger both opens and closes correctly).

Could you please specify which of the two issues you are still seeing, and add a bit more detail (exact steps, desktop vs mobile, browser, and whether DXPR Theme 8.1.3 / the patch from #4 is in use)? That will help us follow up accurately.

Thanks!

I can report that for the second issue on mobile. It was an issue with DXPR builder loading bootstrap as well as the theme. I turned it off on the builder and my issue is fixed now.

jo13sue please open new issue for that in
https://www.drupal.org/project/issues/dxpr_builder