我希望我的网站是响应，因此我想在小屏幕上的特殊菜单。我的大屏幕显示器和我的小屏幕菜单也工作，但它留下了一个空白区域在页面的顶部，我找不到它来自哪里。我只是希望我的整个屏幕变黑，而不是有顶部区域停留在前一个顶部。
这里是按下按钮前的屏幕：

下面是一个屏幕：

提前感谢你的帮助
如图所示，我的问题是菜单激活时顶部的区域，因为它应该像其他区域一样是黑色的，但我不明白为什么它保持在当前状态。

const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");

hamburger.addEventListener('click', () => {

  navLinks.classList.toggle("open");

  links.forEach(link => {
    link.classList.toggle("fade");
  });

  hamburger.classList.toggle("toggle");

});

/*****************************

             Font 

*****************************/

@font-face {
  font-family: 'RomanAntique';
  src: url("../../asset/font/RomanAntique.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/*****************************

     Default Background 

*****************************/

/* > 1000px */

body {
  background-image: url("../../asset/img/BackGroundTest.jpg");
  background-size: 100% !important;
}

/* < 1000px */

@media screen and (max-width: 800px) {
  body {
    background-image: url("../../asset/img/BackGroundTestPhone.jpg") !important;
    background-size: 100% !important;
  }
}

/*****************************

     Default Properties 

*****************************/

body {
  margin: 0;
  margin-top: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'RomanAntique';
  overflow-x: hidden;
  overflow-y: hidden;
}

nav {
  width: 100%;
  display: flex;
  position: fixed;
  z-index: 10;
}

/*Styling logo*/

.logo {
  padding: 1vh 1vw;
  text-align: center;
}

.logo img {
  height: 5rem;
  width: 5rem;
}

/*Styling Links*/

.nav-links {
  display: flex;
  list-style: none;
  width: 88vw;
  padding: 0 0.7vw;
  justify-content: space-evenly;
  align-items: center;
  text-transform: uppercase;
}

.nav-links li a {
  color: #FFFFFF;
  text-decoration: none;
  margin: 0 0.7vw;
}

.nav-links li {
  position: relative;
}

.nav-links li a::before {
  content: "";
  display: block;
  height: 3px;
  width: 0%;
  background-color: #FFFFFF;
  position: absolute;
  transition: all ease-in-out 250ms;
  margin: 15% 0 0 10%;
}

.nav-links li a:hover::before {
  width: 80%;
}

/*Styling Hamburger Icon*/

.hamburger div {
  width: 30px;
  height: 3px;
  background: #FFFFFF;
  margin: 5px;
  transition: all 0.3s ease;
}

.hamburger {
  display: none;
}

/*Stying for small screens*/

@media screen and (max-width: 800px) {
  body {
    margin: 0;
    padding: 0;
  }
  nav {
    position: fixed;
    z-index: 9999;
  }
  .hamburger {
    display: block;
    position: absolute;
    cursor: pointer;
    right: 5%;
    top: 50%;
    transform: translate(-5%, -50%);
    z-index: 999999;
    transition: all 0.7s ease;
  }
  .nav-links {
    position: fixed;
    background: #000000;
    height: 100vh;
    width: 100%;
    flex-direction: column;
    clip-path: circle(50px at 90% -20%);
    -webkit-clip-path: circle(50px at 90% -10%);
    transition: all 1s ease-out;
    pointer-events: none;
  }
  .nav-links.open {
    clip-path: circle(1500px at 100% -10%);
    -webkit-clip-path: circle(1500px at 100% -10%);
    pointer-events: all;
  }
  .nav-links li {
    opacity: 0;
  }
  .nav-links li:nth-child(1) {
    transition: all 0.5s ease 0.2s;
  }
  .nav-links li:nth-child(2) {
    transition: all 0.5s ease 0.4s;
  }
  .nav-links li:nth-child(3) {
    transition: all 0.5s ease 0.6s;
  }
  .nav-links li:nth-child(4) {
    transition: all 0.5s ease 0.8s;
  }
  .nav-links li:nth-child(5) {
    transition: all 0.5s ease 1.0s;
  }
  li.fade {
    opacity: 1;
  }
}

/*Animating Hamburger Icon on Click*/

.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
  transition: all 0.7s ease;
  width: 0;
}

.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

<nav>
  <div class="logo">
    <img src="https://via.placeholder.com/80" alt="Logo Image">
  </div>

  <div class="hamburger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>

  <ul class="nav-links">
    <li><a href="">Nos Produits</a></li>
    <li><a href="">Notre Histoire</a></li>
    <li><a href="">&nbsp; &nbsp; Galerie &nbsp; &nbsp;</a></li>
    <li><a href="">&nbsp; &nbsp; Salons &nbsp; &nbsp; </a></li>
    <li><a href="">&nbsp; &nbsp; Contact &nbsp; &nbsp; </a></li>
  </ul>
</nav>

<!-- <script src="../../asset/js/Menubtn.js"></script> -->