导航栏不会折叠 Bootstrap 5

Question

I have added a toggle element to my navbar, when I click on it it opens but won't close. I've tried solutions found on other stackoverflow posts but nothing seems to work (sometimes it gets worse)

basic.html (where i add all my stylesheets)

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.5/umd/popper.min.js"></script>
  <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
  integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
  <script src="/static/app/custom.js"></script> 
  {% block javascript %}
  {% endblock javascript %}

navbar.html

    <a class="close-navbar-toggler collapsed" data-toggle="collapse" data-target="#navbarNav" 
    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">  
    </a> 
    
      <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="/"> <!--icon placement-->
              <img src="{% static 'app/images/favicon.png' %}" 
              alt="computer display with dna in it" width="30" height="30"> 
            </a>      
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" 
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
          ...
            </div>

Answer 1

Change data-toggle="collapse" (Bootstrap 4) to data-bs-toggle="collapse" (Bootstrap 5). Change data-target="#navbarNav" (Bootstrap 4) to data-bs-target="#navbarNav" (Bootstrap 5).