地图会覆盖响应式导航栏

我正在尝试创建一个网站上具有响应式导航栏的地图。这是我的导航栏和地图的CSS代码：

/* NAVIGATION ANNIMATION */
nav {
    width: 93%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    margin: 0;
    background-color: #1d2d35;
    border-radius: 8px;

    /* starting point */
    opacity: .3;
    -webkit-transform: translate3d(5%,0,0)scale(.97);
    -moz-transform: translate3d(5%,0,0)scale(.97);
    transform: translate3d(5%,0,0)scale(.97);
}

/*Nav Expanding Open Effect*/
nav.open {
    opacity: 1;

    -webkit-transform: translate3d(0,0,0)scale(1);
    -webkit-animation: slideIn .35s ease-in-out;

    -moz-transform: translate3d(0,0,0)scale(1);
    -moz-animation: slideIn .35s ease-in-out;

    transform: translate3d(0,0,0)scale(1);
    animation: slideIn .35s ease-in-out;
}
        #map {
          position:relative;
          height:100%;
          margin-top: 0;
      }

      @media only screen and (min-width: 375px) and (max-width: 812px) {
        #map {
          margin-top: 60px;
        }

这是HTML代码

<div class="container">

      <header class="slide">
          <ul id="navToggle" class="burger slide">
              <li></li><li></li><li></li>
          </ul>
          <h1><a href="MainPage.html">HackAMap</a></h1>
      </header>

      <nav class="slide close">
          <ul>
              <li><a href="MainPage.html">Home</a></li>
              <li><a href="ReportPage.html">Report Status</a></li>
              <li><a href="Map.html">Track Me</a></li>
              <li><a href='map3.html'>Location Check</a></li>
              <li><a href="login.html" onclick="SignOut()">Sign Out</a></li>
          </ul>
      </nav>
      </div>
      <div id="map"></div>

这是切换到响应式时导航栏的图像。

The remaining part of responsive navigation bar is there but it is behind the map. Here is what it should look like. Is there any ways I can put the navigation on top of the map?