首页 > 解决方案 > WordPress Nav Walker - 多级问题

问题描述

我正在尝试制作多级图标以使其像正确的图标或其他东西。我正在使用引导程序导航器。

这是我当前的菜单顺便说一句(html 转换为 wp 菜单):截图

编辑:对不起,我忘了添加我现有的代码。

在我的 header.php 中,我有这个:

<nav id="navbar" class="navbar">
        <ul>
          <?php
                wp_nav_menu( array(
                    'theme_location'    => 'primary',
                    'depth'             =>  3,
                    'container'         => '<div>',
                    'container_class'   => 'collapse navbar-collapse',
                    'container_id'      => 'bs-example-navbar-collapse-1',
                    'menu_class'        => 'nav-link scrollto',
                    'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                    'walker'            => new WP_Bootstrap_Navwalker(),
          ) );
          ?>
          <li class="dropdown"><a href="#"><span>Drop Down</span> <i class="bi bi-chevron-down"></i></a>
            <ul>
              <li><a href="#">Drop Down 1</a></li>
              <li class="dropdown"><a href="#"><span>Deep Drop Down</span> <i class="bi bi-chevron-right"></i></a>
                <ul>
                  <li><a href="#">Deep Drop Down 1</a></li>
                  <li><a href="#">Deep Drop Down 2</a></li>
                  <li><a href="#">Deep Drop Down 3</a></li>
                  <li><a href="#">Deep Drop Down 4</a></li>
                  <li><a href="#">Deep Drop Down 5</a></li>
                </ul>
              </li>
              <li><a href="#">Drop Down 2</a></li>
              <li><a href="#">Drop Down 3</a></li>
              <li><a href="#">Drop Down 4</a></li>
            </ul>
          </li>
          <li><a class="getstarted scrollto" href="#about">Get Started</a></li>

        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav>

在我的functions.php中,我刚刚注册了引导程序的导航步行器

function register_navwalker(){
    require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );

并且...这就是我想要实现的目标:screenshot_2

标签: wordpresswordpress-theming

解决方案


推荐阅读