My bootstrap 4 collapsible navbar is working perfectly on the index page and another specific page. However, when I navigate to a different page that is not one of those two, the collapsible navbar stops functioning. Even though I have copied and pasted all the code from the index page.
I have experimented with different versions of bootstrap 4 and even tried using default navbars provided by bootstrap, but none of them seem to work.
Below is the HTML code for the navbar:
<nav class="navbar bg-custom navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="index"><img src="dist/img/logo_yme.png" alt="Logo" width="236"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item animated"><a class="nav-link" href="vacatures">Vacatures</a></li>
<li class="nav-item animated"><a class="nav-link" href="fotos">foto's</a></li>
<li class="nav-item animated"><a class="nav-link" href="contact">Contact</a></li>
</ul>
</div>
</nav>
In the head tag, these are the links being used:
<link rel="stylesheet" href="./dist/css/main.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic&display=swap" rel="stylesheet">
Although everything seems to be loading correctly in the Network tab, the collapsed menu does not function as expected on certain pages without any error messages appearing in the console.
NOTE: I have added custom routing in my .htaccess file which eliminates the need for file extensions.
Code in .htaccess:
# mod_rewrite starts here
RewriteEngine on
# does not apply to existing directories, meaning that if the folder exists on the server then don't change anything and don't run the rule!!!!!
RewriteCond %{REQUEST_FILENAME} !-d
# Check for files with .html extension
RewriteCond %{REQUEST_FILENAME}\.html -f
# Here we show the page that has the .html extension
RewriteRule ^(.*)$ $1.html [NC,L]