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?

Solution

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.