How do I get a menu to go on top of everything?-CodePudding

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 >
    <div >
      <img src="img/logo.jpg" alt="">
    </div>
    <div >
      <img src="img/user.png" alt="">
      <i ></i>
    </div>
  </div>
</header>
<nav >
  <div >
    <div >
      <a href="">Premium</a>
      <a href="">Support</a>
      <a href="">Download</a>
      <div ></div>
    </div>
    <div >
      <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?

CodePudding user response：

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.

CodePudding user response：

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