导航栏在移动设备上滞后（引导程序）

Question

响应式 Bootstrap 导航栏在移动设备上滞后（出现汉堡菜单时）。它仅在网站的英雄部分滞后。当我在其他部分打开它时，它工作正常。

这是我用于导航栏的代码

.navbar-custom {
  background-color: var(--black);
}

.navbar-custom .navbar-nav .nav-link {
  font-size: 1;
  color: var(--off-white);
  margin: 0.5em;
}

.navbar-custom .navbar-nav .nav-link:hover {
  color: var(--pink);
}

.navbar-brand img {
  width: 3em;
  height: auto;
  margin-left: 0.5em;
}

.menu-bar .navbar .container-fluid {
  padding-inline: 1em;
}

.navbar-toggler {
  color: var(--off-white);
}

.menu-bar {
  width: 100%;
}

<nav class="navbar menu-bar navbar-expand-lg navbar-custom sticky-top">
  <div class="container-fluid bar">
    <a class="navbar-brand" href="#"><img src="../assets/Icon.svg" oncontextmenu="return false;"> </a>
    <button class="navbar-toggler navbar-dark" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#our-nft">Our NFT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#THE-FIVE">Phase 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#pricing">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#roadmap">Roadmap</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
</div>