[FIXED] Nav Bar Toggle Button - Won't dropdown

Issue

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 This is my imports:

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>

These are my scripts at the bottom of the body:

<!-- 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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Solution

Updated Working Snippet with Bootstrap 5.1 version

Bootstrap 5.1

I did following changes in your code

• I used Bootstrap 5.1 version
• I changed following attributes in button element

data-toggle="collapse" 
data-target="#navbarTogglerDemo02" 

Changed to

data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02" 

Please check the following working snippet

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<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-bs-toggle="collapse"
      data-bs-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>
      
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Updated Working Snippet with Bootstrap 3.4.1 version

Note: Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin. Thant's mean you have to call dropdown via javascript

Ex:

// Call the dropdowns via JavaScript___
$('.dropdown-toggle').dropdown();

Please check the following working snippet

$('.dropdown-toggle').dropdown();

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<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
      type="button" 
      class="dropdown-toggle" 
      id="dropdownMenu1" 
      data-toggle="dropdown" 
      aria-haspopup="true" 
      aria-expanded="true"
    >
      <span class="navbar-toggler-icon"></span>
</button>
      
  <div class="collapse navbar-collapse justify-content-md-center dropdown-menu" id="navbar" aria-labelledby="dropdownMenu1">
    {% 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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Reference Link (My Another Stack Overflow Answer): https://stackoverflow.com/a/69763221/3073842

Answered By - Katheer