Bootstrap menu not expanding-CodePudding

I have a wordpress site that I am coding using Bootstrap 5 which works for everything except the navbar which does not expand when clicked as a hamburger, tried a few solutions online, changed CDN, class name changes for Bootstrap 5 etc but still not working, not sure if I have bootstrap installed as well as CDN that might be causing an issue as I started this build a long time ago, code below. Appreciate any help anyone can give me.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <?php wp_head();?>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
</head>
<style>
  .topnav {
    overflow: hidden;
    background-color: #333;
    position: relative;
  }
  
  .topnav #myLinks {
    display: none;
  }
  
  .topnav a {
    color: white;
    padding: 14px 35px;
    text-decoration: none;
    font-size: 18px;
    display: block;
  }
  
  .topnav a.icon {
    background: #0178c4;
    display: block;
    position: absolute;
    right: 30px;
    top: 20px;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
    text-transform: none !important;
    transition: none !important;
    transform: none !important;
  }
  
  .active {
    background-color: #0178c4;
    color: white;
  }
  
  #myLinks a {
    background-color: #0178c4;
  }
  
  #myLinks a:hover {
    background-color: rgba(1, 120, 196, 0.7) !important;
  }
  /* Icon 3 */
  
  #nav-icon3 span:nth-child(1) {
    top: 0;
  }
  
  #nav-icon3 span:nth-child(2),
  #nav-icon3 span:nth-child(3) {
    top: 18px;
  }
  
  #nav-icon3 span:nth-child(4) {
    top: 36px;
  }
  
  #nav-icon3.open span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
  }
  
  #nav-icon3.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  #nav-icon3.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  
  #nav-icon3.open span:nth-child(4) {
    top: 18px;
    width: 0;
    left: 50%;
  }
  
  .header-logo {
    max-width: 60px;
    height: auto;
    margin-left: 30px;
  }
</style>

<body>

  <header >
    <nav >
      <a  href="<?php echo home_url();?>" ><img src="<?php echo get_theme_file_uri('images\m-no-shadow.png');?>" ></a>
      <button  type="button" data-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
        </button>
      <div  id="navbarNav">
        <ul >
          <li >
            <a  href="<?php echo site_url();?>">Home <span >(current)</span></a>
          </li>
          <li >
            <a  href="<?php echo site_url();?>/about-us">About us</a>
          </li>
          <li >
            <a  href="<?php echo site_url();?>/services">Services</a>
          </li>
          <li >
            <a  href="<?php echo site_url();?>/contact-us">Contact us</a>
          </li>
          <li >
            <a  href="<?php echo site_url();?>/portfolio">Portfolio</a>
          </li>
          <li >
            <a  href="<?php echo site_url();?>/reviews">Reviews</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <script>
    function myFunction() {
      var x = document.getElementById("myLinks");
      if (x.style.display === "block") {
        x.style.display = "none";
      } else {
        x.style.display = "block";
      }
    }
  </script>

CodePudding user response：

Since the id for your navbar is navbarNav, replace myLinks in your JS function with navbarNav and also add onclick event to your navbar toggler which calls your myFunction().

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <?php wp_head();?>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
</head>
<style>
  .topnav {
    overflow: hidden;
    background-color: #333;
    position: relative;
  }
  
  .topnav #myLinks {
    display: none;
  }
  
  .topnav a {
    color: white;
    padding: 14px 35px;
    text-decoration: none;
    font-size: 18px;
    display: block;
  }
  
  .topnav a.icon {
    background: #0178c4;
    display: block;
    position: absolute;
    right: 30px;
    top: 20px;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
    text-transform: none !important;
    transition: none !important;
    transform: none !important;
  }
  
  .active {
    background-color: #0178c4;
    color: white;
  }
  
  #myLinks a {
    background-color: #0178c4;
  }
  
  #myLinks a:hover {
    background-color: rgba(1, 120, 196, 0.7) !important;
  }
  /* Icon 3 */
  
  #nav-icon3 span:nth-child(1) {
    top: 0;
  }
  
  #nav-icon3 span:nth-child(2),
  #nav-icon3 span:nth-child(3) {
    top: 18px;
  }
  
  #nav-icon3 span:nth-child(4) {
    top: 36px;
  }
  
  #nav-icon3.open span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
  }
  
  #nav-icon3.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  #nav-icon3.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  
  #nav-icon3.open span:nth-child(4) {
    top: 18px;
    width: 0;
    left: 50%;
  }
  
  .header-logo {
    max-width: 60px;
    height: auto;
    margin-left: 30px;
  }
</style>

<body>

  <header >
    <nav >
      <a  href="<?php echo home_url();?>" ><img src="<?php echo get_theme_file_uri('images\m-no-shadow.png');?>" ></a>
      <button onclick="myFunction()"  type="button" data-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
        </button>
      <div  id="navbarNav">
        <ul >
          <li >
            <a  href="<?php echo site_url();?>">Home <span >(current)</span></a>
          </li>
          <li >
            <a  href="<?php echo site_url();?>/about-us">About us</a>
          </li>
          <li >
            <a  href="<?php echo site_url();?>/services">Services</a>
          </li>
          <li >
            <a  href="<?php echo site_url();?>/contact-us">Contact us</a>
          </li>
          <li >
            <a  href="<?php echo site_url();?>/portfolio">Portfolio</a>
          </li>
          <li >
            <a  href="<?php echo site_url();?>/reviews">Reviews</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <script>
    function myFunction() {
      var x = document.getElementById("navbarNav");
      if (x.style.display === "block") {
        x.style.display = "none";
      } else {
        x.style.display = "block";
      }
    }
  </script>

    <script src="./index.js"></script>
    
</body>
</html>