• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

189
Vistas
¿Cómo obtengo un menú para ir encima de todo?

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>
(No agregué todo el CSS relacionado con el menu y el header porque el resto es irrelevante).

¿Cómo muevo el menu para ir arriba?

about 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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 .

about 3 years ago · Juan Pablo Isaza Denunciar

0

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

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda