I found a post on StackOverflow saying you should use the following to disable horizontal scrolling:

html, body {
    overflow-x: hidden;
}

This solution worked for me. However, now my navigation bar is no longer responsive. Before the issue it worked like this: if you scroll down the page, the navbar will be hidden. Once you begin scrolling up again, the navbar is visible again. Does someone know how to disable horizontal scrolling while maintaining the functionality of a/my responsive navigation bar?

Code for the responsive navigation bar:

let prevScrollPos = window.pageYOffset;

  window.onscroll = () => {
    let currentScrollPos = window.pageYOffset;
    if (prevScrollPos > currentScrollPos) {
      document.getElementById("nav").style.top = "0";
    } else {
      document.getElementById("nav").style.top = "-100px";
    }

    prevScrollPos = currentScrollPos;
  };

Thanks!