Hamburger Menu is not opening on my webpage while using bootstrap. How do I fix this?-CodePudding

My navbar hamburger menu is not opening and I have no clue why? The links show fine on a big screen but the navbar wont open on a smaller screen. I have tried changing the tags in the header and deleting things and refreshing the page to figure out the issue but nothing works. I am new to Bootstrap and Javascript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
     rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 
     crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Megan-Keyes</title>
</head>
<body>
<!--Navbar-->
<nav >
    <div >
        <div class = "header-my-name">
        <header><h2>Hi</h2></header>
            </div>
       <button type="button" data-bs-toggle="collapse" 
data-bs-target=#navmenu>
       <span ></span>
       </button>

        <div  id="navmenu">
        <ul >
           <li >
               <a href="Currency-Converter/index.html"  target="projectWindow1">Currency Converter</a>
           </li>
           <li >
               <a href="Famous-Landmarks/index.html" >Famous Landmarks</a>
           </li>
           <li >
               <a href="project-3" >Project 3</a>
           </li>
           <li >
            <a href="project-4" >Project 4</a>
           </li>
           <li >
            <a href="project-5" >Project 5</a>
           </li>
           <li >
            <a href="project-6" >Project 6</a>
          </li>
          <li >
            <a href="project-7" >Project 7</a>
          </li>
          <li >
            <a href="project-8" >Project 8</a>
          </li>
        </ul>
       </div>
    </div>
   </nav>
   <!--NavBar Color and text center-->
   <section > 
   </section>
   <!--My Project Displays-->
   <main>
    <div id = "currency-converter-project">
    <iframe src="Currency-Converter/index.html" name="projectWindow1" width="100%" height="100px"></iframe> 
    </div>
    <div id = "famous-landmarks-project">
    <iframe src="Famous-Landmarks/index.html" width="100%" height="500px"></iframe> 
    </div>
   </main>
</body>
</html>

CodePudding user response：

Link bootstrap javascript file <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>