mobile menu closed (the pink links are unclickable because of the menu)

  html {
    overflow-x: initial !important;
  }
  /*nav-bar-desktop*/
  .mainNav {
    display: none;
  }
  /*nav-bar-mobile*/
  .page-header {
    background: #322759;
    width: 100%;
    height: 20%;
    position: fixed;
    .logo {
      position: fixed;
      width: 35%;
      margin-top: -28px;
      margin-left: -40px;
    }

    .nav-bar {
      z-index: -1;
    }

    .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;
    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: 65vw;
      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);
  }
}

This is my css file containing the styling for the mobile hamburger menu. The links are clickable when I set the display:none for either the nav-bar class (which is the styling for the grid containing the nav bar) or the menuNav (styling for the actual hamburger menu, note it is different from mainNav which is the desktop ver). I've been playing around with z-index but they don't really affect anything (assuming this is because I have to go through all the pages and make them a higher z index than the hamburger menu) but I was wondering if there was a different solution?