Bootstrap 4 mobile nav not opening

Question

I have a nav in my index.html which I basically copied from a previous site I built which worked but when I click on the hamburger nothing shows, and it does not even change to the closed state of the hamburger. here is my nav code.

<nav class="navbar navbar-default navbar-expand-lg navbar-light navcolor-height nav-font-size" style="background-color: #d58e8db0;">
    <div class="container">
        <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>">
            <img src="<?php  bloginfo('template_url');  ?>/assets/images/keddingtonhouselogo.png" alt="Logo">
       </a>

       <button class="hamburger hamburger--spring" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="hamburger-box">
                      <span class="hamburger-inner"></span>
                    </span>
                  </button>

        <div class="collapse navbar-collapse flex-column align-items-end rem-1p2" id="navbarCollapse">
            <!-- navbar1 -->
            <div class="navbar-nav mb-lg-0 topnavbar">
                <img src="<?php  bloginfo('template_url');  ?>/assets/images/phone-icon.png" class="margin-top-9">
                <a class="nav-item nav-link" href="tel:+441507603973">01507 603973</a>
                <img src="<?php  bloginfo('template_url');  ?>/assets/images/email-icon.png" class=" margin-left-10 margin-top-9">
                <a class="nav-item nav-link" href="mailto:info@keddingtonhouse.co.uk">info@keddingtonhouse.co.uk</a>
            </div>

            <!-- navbar2 -->
            <ul class="navbar-nav mt-0 ">
                <li class="nav-item active">
                    <a class="nav-link" href="<?php echo esc_url( home_url( '/' ) ); ?>">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="<?php echo esc_url( home_url( '/facilities' ) ); ?>">Facilities</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="<?php echo esc_url( home_url( '/directions' ) ); ?>">Directions</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="<?php echo esc_url( home_url( '/photos' ) ); ?>">Photos </a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="<?php echo esc_url( home_url( 'bookings' ) ); ?>">Bookings</a>
                </li>
            </ul>
        </div>
    </div>
</nav> 

I have not even tried to apply the NavWalker for Wordpress yet. If anybody can help solve this it would be great

Update: My errors in the console

UPDATE 2: Here is my Functions.php

function use_these_scripts()
{
//JavaScript Scripts
wp_enqueue_script( 'slick-js', get_template_directory_uri() . '/assets/js/slick.js', array(), true ); //Slick.JS
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/assets/plugins/bootstrap/js/bootstrap.min.js', array(), true ); //Bootstrap Minify.JS
wp_enqueue_script( 'jQuery-js', get_template_directory_uri() . '/assets/js/jquery.min.js', array(), true );
wp_enqueue_script( 'Popper-js', get_template_directory_uri() . '/assets/js/Popper.min.js', array(), true );
//echo "JS Call Testing";
 }

 add_action('wp_enqueue_scripts', 'use_these_scripts');


 function OurCSS()
 { 
wp_enqueue_style( 'slickcss', get_stylesheet_directory_uri() . '/assets/css/slick.css' );
wp_enqueue_style( 'slick-theme-css', get_stylesheet_directory_uri() . '/assets/css/slick-theme.css' );
wp_enqueue_style('font-awesome', 'https://use.fontawesome.com/releases/v5.0.1/css/all.css');
wp_enqueue_style( 'hamburger_css', get_stylesheet_directory_uri() . '/assets/css/hamburger.min.css' );
wp_enqueue_style( 'bootstrap-css', get_stylesheet_directory_uri() . '/assets/plugins/bootstrap/css/bootstrap.min.css' );
wp_enqueue_style( 'main_css', get_stylesheet_directory_uri() . '/assets/css/KeddingtonHouse.css' );

//echo "CSS Call Testing";
}

add_action( 'wp_enqueue_scripts', 'OurCSS' );

Answer 1

在</head>标记之前添加JQuery，并在JQuery之后添加bootstrap.js