Los elementos de la barra de navegación no permanecen fijos cuando abro el desplegable de exceso.

Prefacio: No estoy preguntando sobre “navbar-fixed-top”.

Estoy tratando de hacer una barra de navegación simple con una altura personalizada.

Código HTML:

<nav class="navbar navbar-expand-md">
    <div class="container-fluid nav-bar">
      <a class="navbar-brand" href="#">Navbar</a>

<pre><code>    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon">H</span<
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav ms-auto">
        <a class="nav-link" href="#">HOME</a>
        <a class="nav-link" href="#">DESTINATIONS</a>
        <a class="nav-link" href="#">CREW</a>
        <a class="nav-link" href="#">TECHNOLOGIES</a>
      </div>
    </div>

</div>
</code></pre>

</div></nav>

Código CSS:

.navbar {
background-color: orange;
height: 72px !important;
}

Cuando abro el menú de desbordamiento (o “toggler” en el lenguaje de Bootstrap), el “Nav-brand” junto con otros elementos de la barra de navegación se desplazan hacia arriba para mostrar los elementos ocultos.

Algo sobre mí: Acabo de empezar en el desarrollo web, así que sólo sé algunas cosas sobre HTML y CSS. Entiendo que el problema aquí puede estar ocurriendo debido a un script, pero no estoy seguro. Así que avísame si este problema se puede corregir con CSS y cómo. Si no, ¿está relacionado con JavaScript?

He inspeccionado la página en busca de cambios en el relleno o margen cuando abro el menú de hamburguesa, pero no hay cambios, así que estoy un poco sin ideas de qué podría estar pasando aquí.