Fixed Top Does Not Stay Fixed in Mobile

**Expected behavior**Stays fixed ontop of all content when scrolling down **Actual behavior**Goes behind all content even though z-index is 1030 **Resources (screenshots, code snippets etc.)** you can also visit primetrust.com/escrow on a mobile browser

     <!-- Navbar -->
  <nav class="navbar navbar-expand-xl navbar-dark fixed-top scrolling-navbar z-depth-0">
    <div class="container mx-auto">
      <a href="index" class="navbar-brand">
        <img src="img/primetrust-white-logo.png" height="30" alt="Prime Trust navigation logo white">
      </a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mx-auto text-right pt-1">
          <li class="nav-item mx-2">
            <a href="custody" class="nav-link text-uppercase">custody</a>
          </li>
          <li class="nav-item mx-2">
            <a href="compliance" class="nav-link text-uppercase">compliance</a>
          </li>
          <li class="nav-item mx-2">
            <a href="escrow" class="nav-link text-uppercase">escrow</a>
          </li>
          <li class="nav-item dropdown mx-2">
            <a class="nav-link dropdown-toggle text-uppercase" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              digital assets
            </a>
            <div class="dropdown-menu">
              <a href="primex" class="dropdown-item">PrimeX</a>
              <a href="exchanges" class="dropdown-item">Exchanges/OTC Desks</a>
              <a href="stablecoins" class="dropdown-item">Stablecoins</a>
            </div>
          </li>
          <li class="nav-item dropdown mx-2">
            <a class="nav-link dropdown-toggle text-uppercase" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              trusts
            </a>
            <div class="dropdown-menu">
              <a href="assetprotection" class="dropdown-item">Asset Protection Trusts</a>
              <a href="https://collegetrust.com/" target="_blank" rel="noreferrer" class="dropdown-item">College Savings Trusts</a>
            </div>
          </li>
          <li class="nav-item mx-2">
            <a href="apis" class="nav-link">APIs</a>
          </li>
          <li class="nav-item mx-2">
            <a href="about" class="nav-link text-uppercase">about</a>
          </li>
          <li class="nav-item mx-2">
            <a href="contact" class="nav-link text-uppercase">contact</a>
          </li>
          <li class="nav-item mx-2">
            <a href="https://innovue30.innovestsystems.com/prm/prm/authentication/logon?returnurl=/prm/prm/" class="btn tang-btn btn-md z-depth-0 waves-effect text-uppercase mb-1">login</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- /Navbar -->

// CSS // Navbar nav { position: relative; z-index: 100;

a.nav-link, .dropdown-item{ margin-top: 0.5rem; font-family: $poppins; font-size: 15px; font-weight: 500; color: $light-grey; letter-spacing: 1.2px; }

a.nav-link:hover { color: $money-green-2 !important; }

li.nav-item a.btn { font-size: 15px; }

.dropdown .dropdown-menu { background-color: $faint-blue; box-shadow: 0 10px 30px rgba(5, 65, 183, 0.15); border-radius: 0; } .dropdown .dropdown-menu .dropdown-item { color: $dark-grey; }

.dropdown .dropdown-menu .dropdown-item:hover { color: $light-mint !important; }

.dropdown .dropdown-menu a.dropdown-item:hover { background-color: $main-blue; } }

// Mobile Navbar @media only screen and (max-width: 1024px) { nav { .navbar-collapse { background-color: $main-blue; opacity: 0.95; } }

.fixed-action-btn { visibility: hidden; } }

// Navbar Scrolling .top-nav-collapse { background-color: $main-blue !important; transition: all 0.6s; }