Bootstrap 5.3 burger menu not responsive in Underscore WordPress template

19 Views Asked by At

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' );
0

There are 0 best solutions below