I'm currently developing a unique theme for WordPress and I've reached the responsive navbar section. Despite seeing the toggle icon, clicking it doesn't yield any results.
Using the latest version of bootstrap directly from the website...
I have jquery loaded in the header:
<script type='text/javascript' src='http://localhost/eltecnofilo/wp-includes/js/jquery/jquery.min.js?ver=3.5.1' id='jquery-core-js'></script>
<script type='text/javascript' src='http://localhost/eltecnofilo/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2' id='jquery-migrate-js'></script>
and in the footer, the bootstrap files:
<script type='text/javascript' src='http://localhost/eltecnofilo/wp-content/themes/ElTecnofilo/bootstrap/js/bootstrap.js?ver=5.0.0' id='bootstrap-js'></script>
<script type='text/javascript' src='http://localhost/eltecnofilo/wp-content/themes/ElTecnofilo/bootstrap/js/bootstrap.esm.js?ver=5.0.0' id='bootstrap-esm-js'></script>
<script type='text/javascript' src='http://localhost/eltecnofilo/wp-content/themes/ElTecnofilo/bootstrap/js/bootstrap.bundle.js?ver=5.0.0' id='bootstrap-bundle-js'></script>
Here is the code for the navbar
<div class="row full-width black-bg">
<nav class="navbar navbar-expand-md navbar-dark">
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#collapse-target aria-expanded="false" aria-controls="navbar"">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapse-target">
<ul class="nav navbar-nav">
<?php
$getMenu = wp_get_nav_menu_items( 'main menu'); // Where menu1 can be ID, slug or title
foreach($getMenu as $item){
echo '<li class="nav-item"><a class="nav-link" href="' . $item->url . '">' . $item->title . '</a></li>';
}
?>
</ul>
</div>
</nav>
</div>
Any suggestions on what might be causing this issue?