Estoy tratando de tener un menú que ocupa 100vh cuando se hace clic en el botón de menú. Sin embargo, también tengo un encabezado en la parte superior, por lo que el contenido del menú es inferior. ¿Cómo hago que el menu
vaya encima del header
? Estoy tratando de hacer esto sin hacer que el encabezado display: none
porque quiero que se muestre en el costado, en el espacio restante para que el menu
tenga un view width
de 80vw.
header { height: 3.4rem; display: grid; align-items: center; z-index: 1; } .menu { z-index: 2; position: relative; background-color: #000; margin-left: 4rem; } .menu-container { width: 80vw; height: 100vh; margin-left: 2.5rem; margin-top: 2rem; }
<header> <div class="header-container"> <div class="left"> <img src="img/logo.jpg" alt=""> </div> <div class="right"> <img src="img/user.png" alt=""> <i class="fa-solid fa-bars fa-xl"></i> </div> </div> </header> <nav class="menu"> <div class="menu-container"> <div class="top-menu"> <a href="">Premium</a> <a href="">Support</a> <a href="">Download</a> <div class="menu-line"></div> </div> <div class="bottom-menu"> <a href="">Account</a> <a href="">Log out</a> </div> <img src="img/logo.jpg" alt=""> </div> </nav>
menu
y el header
porque el resto es irrelevante). ¿Cómo muevo el menu
para ir arriba?
Creo que la position: relative
no está configurada correctamente, solo debería estar en un padre que contenga tanto el header
como la nav
. Y luego configura el siguiente css:
.menu { position: fixed; top: 0; left: 0; height: 100vh; width: 80vw; }
Agregue margen y fondo si lo desea.
Ahora la nav
debe estar por encima del header
.
Creo que el problema radica en la posición y el índice z de su .menu y header css. Intente hacer la posición: absoluta para ambos absolutos y cambie el índice z del menú a 1 y el encabezado a 2 para que muestre el menú en la parte superior del encabezado.
Referencia: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index