¿Cómo hago para que la navegación desplegable y la barra de navegación superior funcionen ambas cuando la pantalla es más pequeña?

Solo pude lograr que la barra de navegación del pie de página se desplegara una vez que copié el fragmento completo de 3 scripts JS al final de mi documento HTML. Por ej.

<script src=https://code.jquery.com/jquery-3.2.1.slim.min.js integrity=sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN crossorigin=anonymous></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js integrity=sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q crossorigin=anonymous></script>
<script src=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js integrity=sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl crossorigin=anonymous></script>

Sin embargo, hacer eso ahora causa que mi barra de navegación superior no se despliegue cuando entra en una pantalla de vista más pequeña. Originalmente había logrado que la barra de navegación superior en el encabezado funcionara solo copiando un fragmento de JS de 1 script acortado al final de mi código html.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

¿Puede alguien ayudarme a solucionar cómo hacer que ambas barras de navegación del encabezado y pie de página se desplieguen? En este momento, solo tengo la opción de hacer que el pie de página se despliegue si incluyo los tres scripts JS, o que la navegación superior se convierta en una lista desplegable funcional en pantallas más pequeñas si agrego solo un fragmento bootstrap JS.