Bootstrap NavWalker 下拉菜单显示在桌面但不是移动设备

Question

我正在使用 bootstrap navwalker 在 Wordpress 中构建我的导航。除了移动设备中的下拉菜单外，我已经完成了所有工作。出于某种原因，下拉菜单在桌面视图中工作得非常好，但在移动设备中则没有任何反应。

我已经从下面的 header.php 文件中添加了代码。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a href="<?php echo get_option("siteurl"); ?>">
      <img src="/wp-content/themes/Gaggia/assets/src/library/img/gaggia-logo.svg" class="navbar-brand" href="#">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll"
      aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav ms-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <?php
        wp_nav_menu( array(
          'theme_location'  => 'primary',
          'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
          'container'       => 'div',
          'container_class' => 'nav',
          'container_id'    => 'navbar-collapse collapse',
          'menu_class'      => 'navbar-nav mr-auto',
          'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
          'walker'          => new WP_Bootstrap_Navwalker(),
      ) );
      
        ?>
      </ul>
    </div>
  </div>
</nav>

有谁知道为什么会发生这种情况。我更新了实际的 walker 文件以匹配 data-bs-toggle 而不仅仅是 data-toggle。这解决了桌面的问题。

任何帮助将不胜感激。

谢谢，

Answer 1

想通了。

添加了 css 类来解决问题。

.dropdown-backdrop {
    position: static;
}