Nav Bar Toggle Button - Won't dropdown-CodePudding

I have a Django homepage that has a Bootstrap navbar, and when resized I have it show a toggle button. My issue is that when this toggle button comes into effect, I cannot dropdown the navbar items? I am unsure how I can fix this.

Snip of what these look like (for an idea): https://imgur.com/a/PyiUs38

Pastebin: https://pastebin.com/QqPiyVxf

<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>

CodePudding user response：

Does the html file link to the Bootstrap JavaScript dependency? It is required for navbars.

CodePudding user response：

Include following JS libraries into your template file, right before the closing body tag,

<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>