responsive fixed navigation bar with a tall submenu list not scrolling

Question

I know there are a lot of posts talking about it, I read most of them and didn't help me. I have a website for a school that I am working on, the navbar is working great on desktop but not on mobile. when I press the burger menu icon and the navbar shows, the page scrolls but the navbar stills, I want the opposite to happen. And I want when I hover the submenu name on the desktop to show, but on mobile I want it to stay after click until I click something else. I need your help, please.

I have removed some code to make it easier to read.

HTML:

 .header { width: 100%; height: 768px; position: relative; } nav { display: flex; justify-content: space-around; align-items: center; padding: 0px 30px; z-index: 1; width: 100%; position: fixed; left: 0px; top: 0px; } nav ul { display: flex; margin: 0px; padding: 0px; } nav ul li a { display: flex; } nav ul ul { display: none; position: absolute; } nav ul li a:hover +.dropdown, nav ul li a:active +.dropdown { display: block; } nav ul ul:hover { display: block; } /* Responsive */ @media (max-width:950px) { nav { justify-content: space-between; }.menu { display: none; position: absolute; top: 65px; left: 0px; width: 100%; height: 100vh;important: } nav ul ul{ position; relative: width; 100%: width; 95%.important: } nav;menu-icon { float: right; position: relative; } }

 <section class="header"> <nav> <a href="#" class="logo"> <img src="images/akef_logo.png" alt="akef_logo"> </a> <!-- For Responsive Menu --> <input type="checkbox" id="menu-btn" class="menu-btn"> <label for="menu-btn" class="menu-icon"> <span class="nav-icon"></span> </label> <!-- Navigation --> <ul class="menu"> <li><a href="#" class="active">Home</a></li> <li><a href="#about">About</a></li> <li><a>Classes</a> <ul class="dropdown"> <li><a href="#">3rd Grade</a></li> <li><a href="#">4th Grade</a></li> <li><a href="#">5th Garde</a></li> <li><a href="#">6th Garde</a></li> <li><a href="#">7th Garde</a></li> <li><a href="#">8th Garde</a></li> <li><a href="#">9th Garde</a></li> <li><a href="#" class="g-10th">10th Garde</a></li> </ul> </li> <li><a href="#">Teachers</a></li> <li><a href="#">School News</a></li> <li><a href="#">Blog</a></li> <li><a href="#" class="last-a">Contact</a></li> </ul> </nav> </section>

Answer 1

change the position: absolute; on position: fixed;

.menu {
  display: none;
  position: fixed;
  top: 65px;
  left: 0px;
  width: 100%;
  height: 100vh !important;
}