My Django homepage features a Bootstrap navbar that, when resized, displays a toggle button. However, I am experiencing difficulty with dropdown functionality for the navbar items once the toggle button is activated. Can anyone provide guidance on how to address this issue?
If you need more context, here is an example image: https://i.sstatic.net/cREpj.jpg
To further clarify my setup, here are the imports utilized in my project:
You can view the list of imports on Pastebin: https://pastebin.com/QqPiyVxf
<!-- BOOTSTRAP CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- SCRIPTS -->
<script src="https://kit.fontawesome.com/879dc93f9e.js" crossorigin="anonymous"></script><nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!--LOGO-->
<a class="navbar-brand" style="pointer-events: none">
<!-- Unclickable -->
<img src="http://www.w3.org/2000/svg" width="30" height="30" alt="">
</a>
<!--MAIN NAV-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo02">
{% with request.resolver_match.url_name as url_name %}
<ul class="navbar-nav">
<li class="nav-item {% if url_name == 'home' %}active{% endif %}">
<a class="nav-link" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item {% if url_name == 'about' %}active{% endif %}">
<a class="nav-link" href="{% url 'about' %}">About</a>
</li>
<li class="nav-item {% if url_name == 'projects' %}active{% endif %}">
<a class="nav-link" href="{% url 'projects' %}">Projects</a>
</li>
<li class="nav-item {% if url_name == 'uses' %}active{% endif %}">
<a class="nav-link" href="{% url 'uses' %}">Uses</a>
</li>
<li class="nav-item {% if url_name == 'contact' %}active{% endif %}">
<a class="nav-link" href="{% url 'contact' %}">Contact</a>
</li>
</ul>
{% endwith %}
</div>
<!--SOCIALS-->
<!-- Twitter -->
<a class="btn btn-primary" href="#" target="_blank" role="button" style="margin-left: 10px; background-color: #55acee; border-color: #55acee;">
<i class="fab fa-twitter"></i>
</a>
<!-- LinkedIn -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="margin: 10px 10px 10px 10px; background-color: #0082ca;border-color: #0082ca">
<i class="fab fa-linkedin-in"></i>
</a>
<!-- Github -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="background-color: #333333; border-color: #333333;">
<i class="fab fa-github"></i>
</a>
</nav>At the bottom of the body, below are additional scripts used:
<!-- SCRIPTS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f4f9f9e2e5e2e4f7e6d6a3b8a7b8a5">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>