Lock scrolling while navbar is open

Question

I'm trying to make a responsive website. Almost everything's fine, but I can't solve this problem. When i open the navbar from mobile, it still alows me to scroll the page. Like this: https://gyazo.com/3b58a7631bc3532ae979fdd81ab816d5

I've tried to add "overflow-y: hidden;" to css, but didn't help at all.

<ul class="nav-links" id="nyitas">
  <li><a class="btn btn4" style="color: white;">Hirdetés</a></li>
  <li><a href="index.html">Főoldal</a></li>
  <li><a style="cursor:pointer" onclick="openNav()">Kereső&#11167;</a></li>
  <li><a href="#">Hirdetések</a></li>
  <li><a href="#">Regisztráció</a></li>
  <li><a href="#">Bejelentkezés</a></li>
</ul>

And the CSS:

@media screen and (max-width: 1280px){
  .nav-links{
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: #272727;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
    z-index: 10;
    overflow-y:hidden;
  }

Answer 1

i really suggest you to use bootstrap framework which contain predefined responsive elements like this one

https://getbootstrap.com/docs/4.0/examples/starter-template/