修复了即使z-index = 10000也出现在img后面的导航栏

Question

我已经尝试过对元素进行几乎每种位置组合。我只进行了大约一个半月的网络编码，所以我敢肯定它的确很明显，但是我无法在背景图像的前面显示固定的导航栏。尤其是当#toggle：在移动设备弹出时选中时，导航链接不可见，因为它们位于图像后面。这是我为该项目编写的Codepen

.nav{
  background: rgba(48, 48, 48, 0.738);
  border-bottom: 1px solid black;
  text-align: right;
  height: 70px;
  line-height: 70px;
  position: fixed;
  width: 100%;
  z-index: 10000;
}

.menu{
  margin: 0 30px 0 0;
  z-index: 10000;
}

.menu a {
  text-decoration: none;
  color: white;
  margin: 0 10px;
  line-height: 70px;
}

https://codepen.io/gogocodesmedia/full/mobJZP

请帮助！