仅在较小的屏幕上将 wordpress bootstrap4 navwalker 标题菜单分成两行

Question

此 WordPress 网站使用 Bootstrap 4 和 Navwalker 版本。

我的客户仅通过 iPhone 查看她的网站，她不希望菜单折叠。因此，为了让她看到整个菜单链接，我不得不将字体变小，但她不喜欢这样。

现在我在想，如果我可以将菜单分成两行，或者至少当屏幕小于 450 像素时让链接溢出到下一行，这对她有用。

有没有办法用 bootstrap/navwalker/wordpress 做到这一点？

这是导航部分的 header.php 代码：

  <nav id="site-navigation" class="navbar navbar-expand navbar-light bg-light text-uppercase g-font-weight-400 g-pt-0--lg ml-auto">
    <div class="container">

        <div class="container g-pos-rel">

          <!-- Navigation -->
    
    
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <?php 
                        wp_nav_menu( array(
                            'theme_location'  => 'header-menu',
                            'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
                            'container'       => 'div',
                            'container_class' => 'collapse navbar-collapse',
                            'container_id'    => 'bs-example-navbar-collapse-1',
                            'menu_class'      => 'navbar-nav mr-auto',
                            'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
                            'walker'          => new WP_Bootstrap_Navwalker(),
                        ) );
                ?>
            </div>
        </div>
    </div>
  </nav>

这是从视图页面源代码中看到的结果代码 - 对于导航 php 部分：

  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
          <ul id="menu-menu-1" class="navbar-nav mr-auto">
              <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-307" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-5 current_page_item active menu-item-307 nav-item"><a title="Home" href="https://www.christinezavod.com/" class="nav-link" aria-current="page">Home</a></li>
              <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-2106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2106 nav-item"><a title="Artwork" href="https://www.christinezavod.com/additional-artwork/" class="nav-link">Artwork</a></li>
              <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1621" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1621 nav-item"><a title="Creative Director" href="https://www.christinezavod.com/creative-director-allan-zavod-legacy/" class="nav-link">Creative Director</a></li>
              <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1588" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1588 nav-item"><a title="Background" href="https://www.christinezavod.com/background-modeling/" class="nav-link">Background</a></li>
              <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-316" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-316 nav-item"><a title="Contact Us" href="https://www.christinezavod.com/contact-christine-zavod/" class="nav-link">Contact Us</a></li>
          </ul>
      </div>
  </div>

注意：所有菜单项都没有下拉子菜单。

我想一个选择是创建两个单独的菜单，并将它们显示在彼此下方，但我实际上不知道该怎么做。

最好的解决方案是以某种方式让一个菜单自动拆分为第二行，如果完整的菜单列表无法在较小的屏幕上以可用宽度显示。 （请记住，她不希望菜单按照较小屏幕上的正常情况折叠到菜单图标中！）

任何人都可以建议我如何在较小的屏幕上完成两行菜单吗？

感谢您的任何建议。

阳光奥兹

Answer 1

这不需要对菜单的生成方式进行任何修改，只需更改格式即可。

.navbar-nav

类将

display: flex

应用于UL，因此只需添加

flex-wrap: wrap

即可允许项目分成多行