Así que estaba tratando de hacer un menú de navegación móvil, pero lo que sucede es que cuando hago clic en mi hamburguesa, hace que los elementos de la lista se muestren como bloques en línea, pero la función está configurada para mostrarlos como elementos de nivel de bloque.
HTML
<div class="nav-options"> <i class="fas fa-bars" onclick="mobilenav()"></i> <ul id="myLinks"> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </div>CSS
#myLinks { text-align: right; } #myLinks li { list-style: none; display: inline-block; padding: 0.5rem 2rem; font-size: 20px; } .nav-options i { display: none; } #myLinks li:hover { background-color: #ff3f05; cursor: pointer; transition: all 0.5s; }CSS para vista móvil:
.nav-options i { display: block; font-size: 25px; text-align: right; } .nav-options #myLinks { display: none; padding: 0px; }JS
function mobilenav() { var links = document.getElementById("myLinks"); if (links.style.display === "block") { links.style.display = "none"; } else { links.style.display = "block"; } }Mientras asigna la propiedad de display de los elementos <li> , está controlando la propiedad de visualización del elemento <ul> . En la solución a continuación, eliminé las propiedades de display del archivo CSS. El evento de load se activa cuando se carga la página, y tanto el elemento <ul> como el elemento <li> tienen asignado un estilo de display . Luego, cuando se hace clic en el elemento <i> , se produce el evento de click y se alterna la propiedad de display .
let icon = document.getElementById("icon"); var linkContainer = document.getElementById("myLinks"); /* <ul> element */ var linkElements = document.querySelectorAll('li'); /* <li> elements */ window.addEventListener('load', (event) => { linkContainer.style.display = "block"; linkElements.forEach(li => { li.style.display = "block"; }); }); function log() { console.clear(); console.log(`<ul> display style: ${linkContainer.style.display}`); console.log(`<li> display style: ${linkElements[0].style.display}`); } icon.addEventListener("click", function(e) { log(); if(linkContainer.style.display === "block") linkContainer.style.display = "none"; else linkContainer.style.display = "block"; }); #myLinks { text-align: right; } #myLinks li { list-style: none; /* display: inline-block; */ padding: 0.5rem 2rem; font-size: 20px; } .nav-options i { display: none; } #myLinks li:hover { background-color: #ff3f05; cursor: pointer; transition: all 0.5s; } .nav-options i { display: block; font-size: 25px; text-align: right; } .nav-options #myLinks { display: none; padding: 0px; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="nav-options"> <i id="icon" class="fas fa-bars"></i> <ul id="myLinks"> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </div>