Question 160322 in Html Question posted in
Some basic documentation can be found here.

Can HTML hide side nav & header together?

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>
Tags:

2

Answers


  1. 0 
    #menu__toggle:checked~.menu__box {
  position: absolute;
  right: 0 !important;
}

    Please add a position
    The fixed position is fixed in the specified position, so it is fixed even if you scroll down Absolute, on the other hand, is not fixed because it is placed on the parent element.

    Login or Signup to reply.
  2. 0

    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 :

    1. Change the nav_up to display none like:
     .nav_up{
      display : none ;
  }
    1. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search