Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

71
Vistas
How do I get a menu to go on top of everything?

I am trying to have a menu that takes up 100vh when the menu button is clicked. However, I also have a header at the top so the menu content is lower than it. How do I make the menu go on top of the header? I'm trying to do this without making the header display: none because I want it to be shown on the side - in the left over space from making the menu have a view width of 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>
(I did not add all the CSS to do with the menu and header because the rest of it is irrelevant.)

How do I move the menu to go on top?

7 months ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

I think position: relative is not set properly, it should only be on a parent that contains both header and nav. And then set the following css :

.menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 80vw;
}

Add margin and background if you want.

Now nav should be above header.

7 months ago · Juan Pablo Isaza Denunciar

0

I believe the issue lies in the position and z-index of your .menu and header css. Try making the position: absolute for both absolute and change the z-index of menu to 1 and header to 2 so that it shows menu on top of header.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

7 months 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 empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.