My toggle navbar is not working. Can someone help me?-CodePudding

my toggle navbar is not working, can anyone tell me why and how to fix it? I looked at it online but Im still not sure what is the issue in mine.

    <!DOCTYPE html>
<html lang="en">
{% load static %}
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><style>
 
        
  
    <title>homepage</title>
    </head>
    <body>

  </head>
  <body>
    
    <nav >
      <button  type="button" data-toggle="collapse" data-target="#MyMenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      
          <span ></span>
      </button>

      <div  id="MyMenu">
          <ul >
              <li >
                  <a  href="/">Home <span >(current)</span></a>
              </li>
              <li >
                <a   href="/sentiment/type">Input Text</a>
            </li>
              <li >
                  <a   href="/sentiment/import">Import Tweets</a>
              </li>
              <li >
                  <a  href="/feedback">Feedback</a>
              </li>
          </ul>
      </div>
      <span ><strong>Hello, {{request.user}}</strong></span>&nbsp;&nbsp;&nbsp;
      <button  ><a href="{% url 'user:logout' %}"><h7  color=white;>Logout</h7></a></button>

  </nav>
    <!-- END nav -->
<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>

   
  </body>
</html>

Im using navbar from here: https://getbootstrap.com/docs/4.0/components/navbar/

CodePudding user response：

you have some syntax errors, just simply copy this and replace it with your code:


    <!DOCTYPE html>
    <html lang="en">
    {% load static %}
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     
        <title>homepage</title>
      </head>
      <body>
        
        <nav >
          <button  type="button" data-toggle="collapse" data-target="#MyMenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          
              <span ></span>
          </button>
    
          <div  id="MyMenu">
              <ul >
                  <li >
                      <a  href="/">Home <span >(current)</span></a>
                  </li>
                  <li >
                    <a   href="/sentiment/type">Input Text</a>
                </li>
                  <li >
                      <a   href="/sentiment/import">Import Tweets</a>
                  </li>
                  <li >
                      <a  href="/feedback">Feedback</a>
                  </li>
              </ul>
          </div>
          <span ><strong>Hello, {{request.user}}</strong></span>&nbsp;&nbsp;&nbsp;
          <button  ><a href="{% url 'user:logout' %}"><h7  color=white;>Logout</h7></a></button>
    
      </nav>
        <!-- END nav -->
    <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>
    
       
      </body>
    </html>

CodePudding user response：

Your syntax is wrong. You have a double body label and double head label.