Bootstrap Navbar Toggle not rendering properly

Question

I'm building a wordpress theme using Bootstrap 3. When I decrease the screen width to test the navbar toggle, I get this shown on the image. I figure it's a wordpress problem since I haven't touched the Bootstrap 3 files, but I'm not sure.

I load my css/js files using wp_enqueue_style and wp_enqueue_script

wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js'); wp_register_script( 'full-calendar', get_template_directory_uri() . '/js/fullcalendar.js'); wp_register_script( 'google-calendar', get_template_directory_uri() . '/js/gcal.js'); wp_register_script( 'main', get_template_directory_uri() . '/js/main.js'); wp_register_style( 'style', get_template_directory_uri() . '/style.css'); wp_register_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.css'); wp_register_style( 'fullcalendar', get_template_directory_uri() . '/css/fullcalendar.css'); wp_register_style( 'gravityforms', get_template_directory_uri() . '/css/gravityforms.css');

// For either a plugin or a theme, you can then enqueue the script: wp_enqueue_script("jquery"); wp_enqueue_script( 'custom-script' ); wp_enqueue_script( 'full-calendar'); wp_enqueue_script( 'google-calendar'); wp_enqueue_script( 'main'); wp_enqueue_style('style'); wp_enqueue_style('bootstrap'); wp_enqueue_style('fullcalendar'); wp_enqueue_style('gravityforms');

My header.php looks like this for the navbar section:

        <nav class="navbar navbar-default navbar-fixed-top remove-bottom-margin" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="<?php echo home_url(); ?>"><img src="<?php bloginfo('template_url'); ?>/img/UCHURCH.png"/></a>
            </div>
            <ul class="pull-right" id="nav-menu-mobile">
                <?php
                    wp_nav_menu( array(
                    'menu'              => 'primary',
                    'theme_location'    => 'header-menu',
                    'depth'             => 2,
                    'container'         => 'div',
                    'container_class'   => 'collapse navbar-collapse',
                    'container_id'      => 'bs-example-navbar-collapse-1',
                    'menu_class'        => 'nav navbar-nav',
                    'echo'              => 'false',
                    'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                    'walker'            => new wp_bootstrap_navwalker())
                    );
                ?>
            </ul>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container -->
    </nav>

I used wp_bootstrap_navwalker so I can use wordpress' menu editor to change things. However when I first implemented it it was fine.

Can someone point me in the right direction so I can get the menu to show in its own section without having a clear background (like in the bootstrap 3 demo)?

Answer 1

I figured it out, for some reason I was including the wrong bootstrap.js file. Once I fixed that, it worked!