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