I'm encountering an issue with integrating Bootstrap 5.3 into my Underscore WordPress template. Despite adding Bootstrap 5.3, the burger menu isn't responsive as expected. When resizing the browser window or viewing on mobile devices, the burger menu fails to toggle or function properly. I've ensured that all necessary Bootstrap files are correctly included, yet the problem persists. How can I troubleshoot and resolve this responsiveness issue with the burger menu in my WordPress template?
<div id="page" class="site">
<header id="masthead" class="site-header">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="<?php echo esc_url(home_url('/')); ?>">
<?php
$custom_logo_id = get_theme_mod('custom_logo');
$logo = wp_get_attachment_image_src($custom_logo_id, 'full');
if ($logo) {
echo '<img class="kbo-logo rounded" src="' . esc_url($logo[0]) . '" alt="' . get_bloginfo('name') . '">';
} else {
echo '<img class="kbo-logo rounded" src="' . esc_url(get_template_directory_uri()) . '/assets/images/logo/kbo-logo-transparent.png" alt="KBO">';
}
?>
</a>
<!-- Toggler button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<?php
wp_nav_menu(array(
'theme_location' => 'menu-1',
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'menu_class' => '',
'menu_id' => 'navbarSupportedContent',
'fallback_cb' => 'bootstrap_5_wp_nav_menu_walker::fallback',
'items_wrap' => '<ul id="%1$s" class="navbar-nav ms-auto mb-2 mb-lg-0 text-uppercase %2$s">%3$s</ul>',
'depth' => 0,
'walker' => new bootstrap_5_wp_nav_menu_walker(),
));
?>
</div>
</div>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
function kbo_portfolio_scripts() {
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/main.css', array(), '5.3.3', 'all' );
wp_enqueue_style( 'kbo_portfolio-style', get_stylesheet_uri(), array(), _S_VERSION );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.bundle.min.js', array('jquery'), '5.3.3', true );
wp_enqueue_script( 'kbo_portfolio-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'kbo_portfolio_scripts' );