The navbar toggler dosnt show up on small screens. I cant figure put what is wrong with either my css, html or script

Here is my html:
<nav class="navbar navbar-expand-lg fixed-top bg-light"> <div class="container-fluid py-0 col-lg-9"> <a href="index" class="navbar-brand"> <img src="static/images/Logo.png" alt="" width="124" /> </a> <div class="row align-items-end"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="index">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="about">About</a> </li> <div class="dropdown"> <li class="nav-item"> <a class="nav-link disabled" href="#">Services</a></button> <ul> <div class="dropdown-content"> <li><a href="marketing-solutions">{{base_nav_a2_l1}}</a></li> <li><a href="business-solutions">{{base_nav_a2_l2}}</a></li> </div> </ul> </li> </div> <li class="nav-item"> <a class="nav-link" href="projects">Projects</a> </li> <li class="nav-item"> <a class="nav-link" href="careers">Careers</a> </li> <li class="nav-item"> <a class="nav-link" href="contact">Contact</a> </li> </ul> </div> </div> </div> </nav>

CSS:

` @media screen and (max-width: 768px) {

.navbar .navbar-brand img {
  display: initial; /* or display: inline-block; or any other appropriate value */
}

The tagged script is:

 <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/script.js"></script>