这是创建此类导航菜单的最佳方式吗？

Question

好的，所以我的导航定位于绝对位置。此外，我有一个上面的div也定位绝对，但z索引为2.当你点击一个切换按钮时，z-index为2的div获得了240像素的边距添加到左边显示它下面的导航。这与移动设备完全不同，您可以通过滚动查看div下方的导航。我该如何解决这个问题？

我的网站位于http://www.zoidstudios.com/

密码笔：http://codepen.io/ZoidCraft/pen/KrRvjr

<nav class="main-nav">
    <ul>
        <li><a href="">Examples</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</nav>
<header class="top-header">
    <button class="menu-toggle">
        <span></span>
        <span></span>
        <span></span>
    </button>
    <h1>Zoid Studios</h1>
    <h2>A <span>visual design</span> studio based in the <span>united kingdom</span></h2>
    <a class="btn-view" href="">view our work <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</header>



.main-nav {
  position: fixed;
  background-color: #080911;
  height: 100%;
  width: 240px;
  transition: all 0.3s ease-in-out; }
  .main-nav ul {
    display: flex;
    flex-direction: column; }
  .main-nav a {
    display: block;
    padding: 20px 40px;
    color: #FFFFFF;
    text-align: center;
    font-size: 1rem;
    transition: all 0.3s ease-in-out; }
    .main-nav a:hover {
      color: #ffff00; }

.shift {
  margin-left: 240px; }

.menu-toggle {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  padding: 10px;
  margin: 20px;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer; }
  .menu-toggle span {
    display: block;
    background-color: #FFFFFF;
    width: 18px;
    height: 2px;
    margin: 4px; }

.top-header {
  transition: all 0.3s ease-in-out;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  z-index: 2;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #101223;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); }
  .top-header h1 {
    color: #FFFFFF;
    font-size: 3.2rem;
    font-weight: 800;
    padding: 25px 0;
    text-align: center; }
  .top-header h2 {
    color: #FFFFFF;
    font-size: 2.6rem;
    margin-bottom: 80px;
    text-align: center;
    text-transform: capitalize; }
    .top-header h2 span {
      color: #ffff00; }

@media screen and (max-width: 768px) {
  .top-header h1 {
    font-size: 3rem;
    margin: 0 10px 30px 10px; }
  .top-header h2 {
    font-size: 2.4rem;
    margin: 0 10px 30px 10px; } }
.btn-view {
  color: #FFFFFF;
  padding: 15px 20px;
  border: 1px solid #ffff00;
  text-transform: capitalize;
  transition: all 0.3s ease-in-out; }
  .btn-view i {
    padding-left: 10px; }
  .btn-view:hover {
    color: #101223;
    background-color: #ffff00;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75); }

还有另一种方法可以采用这种精确的侧面导航方式吗？

感谢您的帮助：）