How do I prevent my websites hamburger menu from letting people scroll horizontally

Question

I wanted to know how I would go about preventing people on mobile from swiping sideways after they open and close my hamburger menu. It works fine before they open it but after it breaks and next time it closed they can scroll sideways. I've tried the things suggested on other questions to no avail. It's not a very big site yet so there isn't much there.

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

Website: mostwantedrbx.github.io

Repo: https://github.com/MostwantedRBX/MostwantedRBX.github.io

Answer 1

Give the .nav-links a position of fixed instead of absolute.

@media screen and (max-width: 788px) {
.nav-links {
    position: fixed; /* instead of absolute */ 
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: cornflowerblue;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
}

}