I need assistance with my navigation menu in the index.html file. I copied the code from a previous website that was working, but now when I click on the hamburger icon, nothing happens - it doesn't even switch to the closed state. Here is the code for my navigation menu:
<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:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b52555d547b505e5f5f52555c4f545553544e485e155854154e50">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5930373f3619323c3d3d30373e2d363731362c2a3c773a36772c32">[email protected]</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 haven't yet applied the NavWalker for Wordpress. Any help solving this issue would be greatly appreciated.
Update: The errors I'm seeing in the console can be viewed here.
UPDATE 2: Below 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' );