Make side nav menu disappear along with header

May 9, 2023

I have a hamburger nav placed in a header. When the hamburger nav is clicked, it opens a nav menu from the right side of the screen. When the user scrolls down, the header disappears, but the nav menu does not disappear. It is my intention that both the header and the nav menu will disappear. I have tried replicating the same function that removes my header for the nav menu, but this creates more issues than it solves. Any help would be appreciated.

 ////Secondary pages Header scroll effect//////

 const SCROLL_THRESHOLD = 30;

 let lastScrollY = window.scrollY;
 
 window.addEventListener('scroll', () => {
   const currentScrollY = window.scrollY;
   const delta = currentScrollY - lastScrollY;
 
   if (delta > 0 && delta >= SCROLL_THRESHOLD) {
     // The user has scrolled down by at least SCROLL_THRESHOLD pixels
     document.querySelector(".the-header").classList.add("nav_up")
 
   } else if (delta < 0 && -delta >= SCROLL_THRESHOLD) {
     // The user has scrolled up by at least SCROLL_THRESHOLD pixels
     document.querySelector(".the-header").classList.remove("nav_up")
   }
 
   lastScrollY = currentScrollY;
 });

body{
  height: 30000px;
  background-color: lightblue;
  color: white;
}
.header__top {
  width: 100%;
  height: 120px;
  background-color: #000;
  position: fixed;
  top: 0px;
  z-index: 5;
  border-bottom: 0.02rem solid #000 ;
  display: flex;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: top 0.5s ease-in-out;
}
.the-header { /*make header dissapear*/
  top: 0px;
  transition: top 0.5s ease-in-out;
}
#hamburger__menu {
    background-color: #000;
    z-index: 10;
}
#menu__toggle {
    opacity: 0;
}
#menu__toggle:checked+.menu__btn .menu__hamburger {
  transform: rotate(45deg);
}
#menu__toggle:checked+.menu__btn .menu__hamburger::before {
  top: 0;
  transform: rotate(0deg);
}
#menu__toggle:checked+.menu__btn .menu__hamburger::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked~.menu__box {
  right: 0 !important;
}
.menu__btn {
  position: fixed;
  right: 40px;
  width: 100px;
  height: auto;
  cursor: pointer;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 1em;
}
#menu {
  color: #fff;
  font-size: 1.5rem;
  
}
.menu__btn .menu__hamburger,
.menu__btn .menu__hamburger::before,
.menu__btn .menu__hamburger::after {
  display: block;
  position: absolute;
  width: 25px;
  height: 2px;
  background-color: #FFF;
  transition-duration: .5s;
}
.menu__btn .menu__hamburger::before {
  content: '';
  top: -8px;
}
.menu__btn .menu__hamburger::after {
  content: '';
  top: 8px;
}
.menu__box {
  display: block;
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: rgba(79, 112, 148, 0.8);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, .7);
  transition-duration: .5s;
  z-index: 10;
}
.menu__item {
  display: block;
  padding: 12px 24px;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}
.menu__item:hover {
  background-color: #87b6ca;
}
.nav_up { /*---disappearing nav effect---*/
  top: -500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <header class="header__top the-header">
    <div id="hamburger__menu">
      <input id="menu__toggle" type="checkbox" />
      <label class="menu__btn" for="menu__toggle">
        <div id="menu">MENU</div>
        <div><span class="menu__hamburger"></span></div>
      </label>
      <ul class="menu__box">
        <li class="menu__item">HOMEPAGE</li>
        <li class="menu__item">NEWS</li>
        <li class="menu__item">ABOUT</li>
        <li class="menu__item">FACILITIES</li>
      </ul>
    </div>
</header>
</body>

>Solution :

I think when you are adding ‘.nav_up’ class to the ‘the-header’ the header disappears but the ‘menu__box’ already as a top styling which doesn’t get overriden .

So either :

Change the nav_up to display none like:

 .nav_up{
      display : none ;
  }

Add nav_up to ‘menu__box’ in

// In The user has scrolled down by at least SCROLL_THRESHOLD pixels
document.querySelector(".menu__box").classList.add("nav_up")

// In The user has scrolled up by at least SCROLL_THRESHOLD pixels
document.querySelector(".menu__box").classList.remove("nav_up")

hope this helps