He intentado bastante tiempo para averiguar por qué el símbolo de cierre (X) no se muestra si abro mi barra de navegación.
Si está cerrado, todo parece estar bien.
En las herramientas de desarrollo de Google Chrome, el ícono todavía está en la página, pero en el front-end no está visible.
Mi entorno:
¿Hay algo que no veo?
Aquí está mi archivo index.html (lo sé, el JavaScript debería estar en un archivo propio ;-P):
section { background-color: blue; padding: 20px; /* height: 40px; */ display: flex; justify-content: space-between; align-items: center; } img { height: 30px; width: auto; } .toggle-box a img { filter: invert(1); } .img.menu.hide { display: none; } img.close { display: none; } img.close.show { display: flex; /* z-index: 9999; */ } nav.navigation { display: none; } nav.navigation.active { display: flex; justify-content: center; align-items: center; flex-direction: column; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: blue; /* z-index: 1111; */ } nav.navigation.active a { padding: 20px; color: #ffffff; font-size: 20px; font-weight: bold; text-decoration: none; } .phone-logo a img { filter: invert(1); } <section> <div class="toggle-box"> <a onclick="showMenu()" href="#"> <img class="menu" src="menu-outline.svg" /> <img class="close" src="close-outline.svg" /> </a> </div> <nav class="navigation"> <a href="#">Sec 1</a> <a href="#">Sec 2</a> <a href="#">Sec 3</a> <a href="#">Sec 4</a> </nav> <div class="phone-logo"> <a href="#"> <img src="call-outline.svg" /> </a> </div> </section> <script> function showMenu() { document.querySelector(".menu").classList.toggle("hide"); document.querySelector(".close").classList.toggle("show"); document.querySelector(".navigation").classList.toggle("active"); } </script> </body>Es solo una cuestión de z-index para el .toggle-box .
section { background-color: blue; padding: 20px; /* height: 40px; */ display: flex; justify-content: space-between; align-items: center; } img { height: 30px; width: auto; } .toggle-box a img { filter: invert(1); } .img.menu.hide { display: none; } img.close { display: none; } img.close.show { display: flex; /* z-index: 9999; */ } nav.navigation { display: none; } nav.navigation.active { display: flex; justify-content: center; align-items: center; flex-direction: column; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: blue; /* z-index: 1111; */ } nav.navigation.active a { padding: 20px; color: #ffffff; font-size: 20px; font-weight: bold; text-decoration: none; } .phone-logo a img { filter: invert(1); } .toggle-box { z-index: 1; } <section> <div class="toggle-box"> <a onclick="showMenu()" href="#"> <img class="menu" src="menu-outline.svg" /> <img class="close" src="close-outline.svg" /> </a> </div> <nav class="navigation"> <a href="#">Sec 1</a> <a href="#">Sec 2</a> <a href="#">Sec 3</a> <a href="#">Sec 4</a> </nav> <div class="phone-logo"> <a href="#"> <img src="call-outline.svg" /> </a> </div> </section> <script> function showMenu() { document.querySelector(".menu").classList.toggle("hide"); // document.querySelector(".close").classList.toggle("show"); document.querySelector(".navigation").classList.toggle("active"); } </script> </body>Los elementos que se encuentran más adelante en el documento tienen un orden de apilamiento más alto, lo que significa que están superpuestos a los elementos anteriores. Puede reorganizar su marcado para resolver eso.
section { background-color: blue; padding: 20px; /* height: 40px; */ display: flex; justify-content: space-between; align-items: center; } img { height: 30px; width: auto; } .toggle-box a img { filter: invert(1); } .img.menu.hide { display: none; } img.close { display: none; } img.close.show { display: flex; /* z-index: 9999; */ } nav.navigation { display: none; } nav.navigation.active { display: flex; justify-content: center; align-items: center; flex-direction: column; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: blue; /* z-index: 1111; */ } nav.navigation.active a { padding: 20px; color: #ffffff; font-size: 20px; font-weight: bold; text-decoration: none; } .phone-logo a img { filter: invert(1); } <section> <nav class="navigation"> <a href="#">Sec 1</a> <a href="#">Sec 2</a> <a href="#">Sec 3</a> <a href="#">Sec 4</a> </nav> <div class="toggle-box"> <a onclick="showMenu()" href="#"> <img class="menu" src="menu-outline.svg" /> <img class="close" src="close-outline.svg" /> </a> </div> <div class="phone-logo"> <a href="#"> <img src="call-outline.svg" /> </a> </div> </section> <script> function showMenu() { document.querySelector(".menu").classList.toggle("hide"); document.querySelector(".close").classList.toggle("show"); document.querySelector(".navigation").classList.toggle("active"); } </script> </body>