title: Bootstrap menu not expanding
body: <p>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.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;?php wp_head();?&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;style&gt;
    .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;
    }
  &lt;/style&gt;
  
  &lt;body&gt;
  
    &lt;header class="site-header"&gt;
      &lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
        &lt;a class="navbar-brand" href="&lt;?php echo home_url();?&gt;" class="active"&gt;&lt;img src="&lt;?php echo get_theme_file_uri('images\m-no-shadow.png');?&gt;" class="header-logo"&gt;&lt;/a&gt;
        &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
        &lt;div class="collapse navbar-collapse" id="navbarNav"&gt;
          &lt;ul class="navbar-nav"&gt;
            &lt;li class="nav-item active"&gt;
              &lt;a class="nav-link" href="&lt;?php echo site_url();?&gt;"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="&lt;?php echo site_url();?&gt;/about-us"&gt;About us&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="&lt;?php echo site_url();?&gt;/services"&gt;Services&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="&lt;?php echo site_url();?&gt;/contact-us"&gt;Contact us&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="&lt;?php echo site_url();?&gt;/portfolio"&gt;Portfolio&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="&lt;?php echo site_url();?&gt;/reviews"&gt;Reviews&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
    &lt;script&gt;
      function myFunction() {
        var x = document.getElementById("myLinks");
        if (x.style.display === "block") {
          x.style.display = "none";
        } else {
          x.style.display = "block";
        }
      }
    &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>