As I embark on creating my very first webpage, I wanted to incorporate a responsive navigation bar using Bootstrap 5. Initially, everything was working perfectly until suddenly, the navigation bar stopped functioning properly. While it functions as intended in the "large" web view, upon decreasing the screen size, it fails to expand downward even though the button itself responds when clicked.

Below you will find the code snippet for the dropdown menu along with the CSS rules for the header area and its responsive design. Any assistance or insights would be greatly appreciated!

HTML

<!-- Navbar -->
<nav class="navbar navbar-expand-md bg-body-secondary rounded-4">
<div class="container-fluid">
  <a class="navbar-brand" href="index.html">Kumi Sushi</a>
  <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 justify-content-end" id="navbarNavDropdown">
    <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="menu.html">Menu</a>
        </li>
              <!-- dropdown -->
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Navigation
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="directions.html">Directions</a></li>
              <li><a class="dropdown-item" href="about.html">About Us</a></li>
              <li><a class="dropdown-item" href="contact.html">Contact</a></li>
            </ul>
          </li>  
              <!-- dropdown -->
      </ul>
    </div>
  </div>
</nav>
<!-- Navbar -->  


>>>>>CSS 

  /* HEADER */
  header {
      background: 
          linear-gradient(
              rgba(0, 0, 0, 0.6), 
              rgba(0, 0, 0, 0.6)
          ),
      url(Images/hero.jpg);
      background-position: center;
      background-size: 100%;
      height: 400px;
      padding: 20px; 
      text-align: center;
    } 
    header .logo a { 
        background-image: url("Images/logo.png"); 
        background-size: 280px;
        background-repeat: no-repeat;
        display: inline-block; 
        height: 340px;
        width: 280px;
        top: 0rem;
        position: relative; 
        text-align: center;
        text-indent: -999999999px;
    }  
    
     .navbar { 
        background-color: gray;
        box-shadow: 0px 2px 5px #777; 
        height: rem;
     } 
     .navbar-brand { 
        text-transform:uppercase; 
     }
    nav ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    } 
      nav li { 
          color: rgb(0, 0, 0);
          font-size: larger; 
          font-weight: 400;
          display: inline-flex; 
          justify-content: center;
          margin-right: 20px; 
          border-radius: 2px; 
          padding: 2px; 
    } 
      section {
        background: white;
        padding: 20px;
        display: flex;
        flex-direction: row;
    }  
  

/* RESPONSIVE RULES .IMG */
    @media screen and (max-width: 500px) { 
        header { 
                height: 200px; 
                background-position: 0 -0px; 
                background-repeat: no-repeat;
        }
    }
    @media screen and (max-width: 548px) { 
        nav li { 
            font-size: medium;
      } 
    }    
    @media screen and (max-width: 625px) {
        .features { 
            display: block;
        } 
        }  
    @media screen and (max-width: 767px) { 
        .navbar { 
            height: 3.2rem; 
        }
    }
    @media screen and (max-width: 859px) { 
        header .logo a {
            background-image: url("Images/logo.png"); 
            text-align: center; 
            background-size: 58%; 
            background-position: 50% 0;
        } 
        header { 
            height: 220px; 
            background-position: 0 0px;
        } 
    }

Despite attempting various solutions such as reverting back to version 5.3 and eliminating any changes made in 'style.css', the issue persists. Upon inspecting the page using developer tools, the dropdown items appear centered and behind the logo, indicating a layout problem that requires investigation.

I spent considerable time scouring through Bootstrap documentation and forum posts without finding a definitive solution to this dilemma. It seems like there might be a minor oversight causing the malfunction, which eludes my current understanding.

An additional note – I have included the Bootstrap CSS CDN in the head section and placed the JS CDN at the end of the body tag. Most past issues related to jQuery placement, but from what I gather, it should not be necessary for Bootstrap 5.3.

If anyone can offer advice or guidance on resolving this perplexing situation, your input would be immensely valued. Thank you once again for your support :)