How do I get my bootstrap wordpress theme navigation submenu to work correctly? >

See more:

WordPress

bootstrap

Hello,
I am creating a bootstrap wordpress theme using wp-bootstrap-navwalker. When the navigation menu is in mobile view the submenu covers up the menu instead of properly sliding down. How do I get this menu to work correctly when in mobile view? My code works great outside of wordpress but there is something I have not transposed over to my Wordpress theme correctly.

What I have tried:

This bootstrap navigation menu works correctly when I have tested the html code outside of wordpress but the code does not work when I use it on wordpress. I tried eliminating and altering the following code from my css. This code has to be eliminated from my css code when testing it outside of bootstrap in order to get it to work. That same method does not work when I tried altering my css on wordpress:

.dropdown:hover .dropdown-menu {
    display: block;
    
}

Here is part of my header.php code:

   <header id="header">
        <nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"  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>
   
</div>
        
        <?php
        wp_nav_menu( array(
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker())
        );
    wp_nav_menu( $mobile_nav );
        ?>
    
    </div>
</nav>

Here is part of my functions.php:

// Register Custom Navigation Walker
require_once get_template_directory() . '/wp-bootstrap-navwalker.php';

//theme support
function wpb_theme_setup(){
    //nav menus
    register_nav_menus( array(
    'primary' => __( 'Primary Menu'),
) );
}

add_action('after_setup_theme', 'wpb_theme_setup');


function KWD_script_enqueue(){
    
    wp_enqueue_style('bootstrap', get_template_directory_uri() . "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
    wp_enqueue_style('customstyle', get_template_directory_uri(). '/css/template4.css', array(), '1.0.0', 'all');
    wp_enqueue_script('customjs', get_template_directory_uri(). '/js/template4.js', array(), '1.0.0', true);
     wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', array('jquery'), '3.3.4', true );
}

add_action('wp_enqueue_scripts', 'KWD_script_enqueue');