Entonces obtuve una barra de navegación, y mientras trabajaba en la capacidad de respuesta móvil cuando abro el menú móvil, el logotipo se mueve hacia abajo con la lista hacia el centro. ¿Cómo puedo evitar esto, quiero que el logotipo permanezca en su lugar original y no se mueva cuando abra la lista? También se mueve hacia la izquierda, por lo que tampoco estoy seguro de qué hacer porque configuré la propiedad para justificar el contenido: espacio alrededor;.
function mobileNav() { let navlinks = document.getElementById('myLinks'); let section1 = document.getElementById("section1"); if (navlinks.style.display == 'none') { navlinks.style.display = 'block'; section1.style.height = '70vh'; } else { section1.style.height = '50vh' navlinks.style.display = 'none'; } } .navbar { /* max-width: 100%; */ display: flex; width: 100%; justify-content: space-around; align-items: center; padding-top: 50px; z-index: 5; } .logo { font-size: 3rem; font-weight: bold; color: white; } .nav-options i { color: white; display: none; } @media only screen and (max-width: 767px) { .nav-options i { display: block; font-size: 3rem; text-align: right; padding: 0px; } #myLinks { display: none; padding: 0px; } .nav-options #myLinks a { display: block; text-align: right; padding: 5px 0px; } } /* ADDED otherwise it is white on white */ body{ background:salmon; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="navbar"> <label class="logo" id="logo">COINGAIN</label> <div class="nav-options"> <i class="fa fa-bars" onclick="mobileNav()" id="hamburger"></i> <div id="myLinks"> <a href="coingain.html">Home</a> <a href="aboutcoingain.html">About</a> <a href="#">App</a> <a href="coingainfeatures.html">Features</a> <button class="start" id="">Get Started</button> </div> </div> </div>Para solucionar esto, debe colocar el div #myLinks absolutamente para que no afecte el flujo de los otros elementos en el flexbox (y la página). Para que esto funcione, también debe posicionar a su padre, el div .nav-options relativamente, así:
Posicione el div .nav-options relativamente .
.nav-options { position: relative; } Luego coloque el div #myLinks (el div desplegable) absolutamente dentro .nav-options div principal y asígnele un posicionamiento correcto de 0px (o 0rem o simplemente 0).
#myLinks { ... position: absolute; right: 0px; ... }