Bootstrap collapse won't stay collapsed

[AaronPSullivan]

I am experiencing an issue where the menu will not close/toggle once opened/toggles when using a child theme. This issue does not occur when the parent theme is active.

When .navbar-toggler is clicked, .navbar-collapse adds collapse.show to its class list as expected. However when you click the toggler again, .collapse.show switches to .collapsing (as expected) then back to .collapse.show instead of just .collapse.

I've heard that this behavior can happen when popper is loaded separately from Bootstrap 5 - because it is already included in Bootstrap 5 and this effectively adds it twice... But I haven't been able to pinpoint if this is the case here.

I have already tried downloading and installing a fresh copy of both the parent (v1.2.2) and child theme (v 1.2.0). The issue persists in the new or 'blank' child theme, but not in the parent theme. I have also tried switching to Bootstrap 4 in the customizer.

However... if I spin up a brand new WP install then add the parent and child theme, the issue goes away... Is this conflict with a plugin or something else stored in the database?

Any help is very appreciated.

[AaronPSullivan]

It seems I hinted at the problem/solution while trying to explain the issue. I indeed am having a plugin conflict but ONLY while using the child theme for Understrap. The plugin in question is Counter Number, which can be found here: https://wordpress.org/plugins/counter-number-showcase/. I haven't figured out WHY this plugin would cause an issue with the Bootstrap menu and ONLY when using the child theme... but disabling the plugin fixes the issue.

[IanDelMar]

You could try this:

// functions.php
function prefix_dequeue_wpsm_script() {
	wp_dequeue_script( 'wpsm_count_bootstrap-js-front' );
}
add_action( 'wp_dequeue_scripts', 'prefix_dequeue_wpsm_script' );

The plugin loads its own Bootstrap JS including Popper. I guess there's a conflict. When I had a quick look I couldn't determine the purpose of Bootstrap's JS in the plugin. So I am not sure what will happen when you dequeue the script.

Does your child theme use the same Bootstrap version as the parent theme? Does the parent theme use Bootstrap 5 when enabled? The default is Bootstrap 4. It's possible that the plugin conflicts with v5 of your child theme, but not with v4 of the parent theme.

[AaronPSullivan]

If I use "wp_print_scripts" instead of "wp_dequeue_scripts" this does appear to work.

function prefix_dequeue_wpsm_script() { wp_dequeue_script( 'wpsm_count_bootstrap-js-front' ); } add_action( 'wp_print_scripts', 'prefix_dequeue_wpsm_script' );

[IanDelMar]

I accidentally used the wrong hook. There is no wp_dequeue_scripts hook. Should have been add_action( 'wp_enqueue_scripts', 'prefix_dequeue_wpsm_script' );.

I'm curious. Does the parent theme use Bootstrap 4? Can you "trigger" a conflict when setting the Bootstrap version to 5?

I think the child theme dropped support for Bootstrap 4 and switching to Bootstrap 4 in the child theme has no effect.

[AaronPSullivan]

Ok 'wp_enqueue_scripts' does seem to work.

And yes it appears that the parent theme defaults to Bootstrap 4 and the issue returns when I change the parent theme to Bootstrap 5.

[IanDelMar]

Thank you for checking this.