mobile view of website does not scroll, I have tried every overflow and overflow-scrolling variation I've seen on slack so far

Question

@media screen and(max-width: 414px) {
  html {
    overflow-x: initial !important;
    -webkit-overflow-scrolling: touch;
  }

  /*nav-bar-desktop*/
  .mainNav {
    display: none;
  }

  /*nav-bar-mobile*/
  .page-header {
    background: #322759;
    width: 100%;
    height: 20%;
    position: fixed;

    .logo {
      display: none;
    }

    .mobile-logo {
      display: block;
      position: fixed;
      width: 35%;
      margin-top: -65px;
      margin-left: -40px;
    }

    .nav-bar {
      position: absolute;
      z-index: 0;
      margin-top: -1000px;
    }

    .page-header-links {
      z-index: 0;
    }

  }

  .nav-bar-mobile {
    position: relative;
    display: block;
  }

  .nav-bar-mobile button {
    position: fixed;
    right: 40px;
    top: 40px;
    z-index: 2;
    cursor: pointer;
    background: transparent;
    border: none;
  }

  .menuNav {
    overflow-y: none;
    list-style: none;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    width: 0;
    overflow: hidden;
    max-width: 414px;
    margin: 0;
    touch-action: none;
    text-align: center;
  }

  .menuNav.showMenu {
    width: 100%;
    right: 0px;
    height: 100vh;
    padding-top: 200px;
    position: fixed;
    background: #322759;

    .mobile-nav-monster {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 50vw;
      justify-content: flex-start;
    }
  }

  .nav-tabs {
    padding: 20px;
    border-bottom: none !important;
    text-decoration: none;
    color: #D9D8D8;
  }

  .menuNav:link {
    color: #D9D8D8;
  }

  .menuNav:visited {
    color: #D9D8D8;
  }

  .menuNav:active {
    color: #E87DA6;
  }

  .hamburger-close {
    color: #FFFFFF;
    width: 40px;
    height: 40px;
    margin-top: 10px;
    transform: scale(1.7);
  }

  .hamburger-open {
    color: #FFFFFF;
    width: 40px;
    height: 40px;
    margin-top: 10px;
    transform: scale(1.7);
  }

  .page-triangle-banner {
    vertical-align: top;
    height: 200px;
    margin-top: 100px;
  }

  .mobile-break {
    display: block !important;
  }

  .desktop-break {
    display: none !important;
  }
}

this is my css styling sheet for the mobile nav menu^^^^

<nav className="nav-bar-mobile">
  <button onClick={handleToggle}>
    {navbarOpen ? (
      <MdClose className="hamburger-close" />
    ) : (
      <FiMenu className="hamburger-open" />
    )}
  </button>
  <ul className={`menuNav ${navbarOpen ? " showMenu" : ""}`}>
    <NavLink
      exact
      to="/"
      className="nav-tabs"
      activeStyle={{ color: "#E87DA6" }}
      activeClassName="active-link"
      onClick={() => closeMenu()}
    >
      <p
        style={{
          fontFamily: "roboto",
          fontSize: "30px",
          fontWeight: "700",
          lineHeight: "18px",
          letterSpacing: "0.15px",
        }}
      >
        Home
      </p>
    </NavLink>
    <NavLink
      exact
      to="/about"
      className="nav-tabs"
      activeStyle={{ color: "#E87DA6" }}
      activeClassName="active-link"
      onClick={() => closeMenu()}
    >
      <p
        style={{
          fontFamily: "roboto",
          fontSize: "30px",
          fontWeight: "700",
          lineHeight: "18px",
          letterSpacing: "0.15px",
        }}
      >
        About
      </p>
    </NavLink>
    <NavLink
      exact
      to="/team"
      className="nav-tabs"
      activeStyle={{ color: "#E87DA6" }}
      activeClassName="active-link"
      onClick={() => closeMenu()}
    >
      <p
        style={{
          fontFamily: "roboto",
          fontSize: "30px",
          fontWeight: "700",
          lineHeight: "18px",
          letterSpacing: "0.15px",
        }}
      >
        Team
      </p>
    </NavLink>
    <NavLink
      exact
      to="/resources"
      className="nav-tabs"
      activeStyle={{ color: "#E87DA6" }}
      activeClassName="active-link"
      onClick={() => closeMenu()}
    >
      <p
        style={{
          fontFamily: "roboto",
          fontSize: "30px",
          fontWeight: "700",
          lineHeight: "18px",
          letterSpacing: "0.15px",
        }}
      >
        Resources
      </p>
    </NavLink>
    <img src={monster} alt="blue-monster" className="mobile-nav-monster" />
  </ul>
</nav>;

this is my jsx file for the mobile nav menu ^^^

I've looked through forums to test setting my overflow to initial or auto or none and other such overflow-scrolling settings. But it doesn't work in production. My local host does not pick up on these problems so it is hard to test since everytime I have to run the build and push it into production to see the issue.

More insight into this issue might be the fact that there are two vertical scroll bars that I cannot figure out where they come from. The first scroll bar is big and seems to be the reason it prohibits scrolling. The second scroll bar is small and only appears after you are at the bottom of the page.

Answer 1

Try removing the footer position and z-index.

 footer { background: top / cover no-repeat url(./images/footer-background-short.png); padding: 3% 8%; background-color: rgb(50, 40, 89); color: white; width: 100%; }