Understrap 主题子菜单看起来很奇怪

如何解决Understrap 主题子菜单看起来很奇怪

我在我的 wordpress 网站上使用 Understrap 主题并尝试实现一个子菜单 （此处为 www.irricad.com，“支持”菜单中的“视频”条目）。

如您所见，子菜单位于主菜单的顶部，遮挡了某些条目并阻止了正确导航。我希望它像“适当的”子菜单一样显示在右侧（最好有指示子菜单的小箭头）。

子菜单与主菜单项具有相同的类，因此我不知道如何使其显示不同。我需要一些额外的 CSS 吗？我在后端的菜单配置中遗漏了什么吗？如果没有明确的类，是什么让 wordpress 知道这是一个子菜单，而不是嵌套级别？

解决方法

我想通了。我将主题标题菜单深度更改为 3：

<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
    array(
      'theme_location'  => 'primary','container'       => 'div','container_class' => 'collapse navbar-collapse','container_id'    => 'navbarNavDropdown','menu_class'      => 'navbar-nav ml-auto','fallback_cb'     => 'Understrap_WP_Bootstrap_Navwalker::fallback','menu_id'         => 'main-menu','depth'           => 3,'walker'          => new Understrap_WP_Bootstrap_Navwalker(),)
  ); ?>

我将我的 navwalker.php 更改为这个（为有孩子的孩子添加切换样式）：

// If item has_children add atts to <a>.
if (isset($args - > has_children) && $args - > has_children && 0 === $depth && $args - > depth !== 1) {
  $atts['href'] = '#';
  $atts['data-toggle'] = 'dropdown';
  $atts['aria-haspopup'] = 'true';
  $atts['aria-expanded'] = 'false';
  $atts['class'] = 'dropdown-toggle nav-link';
  $atts['id'] = 'menu-item-dropdown-'.$item - > ID;
} else {
  $atts['href'] = !empty($item - > url) ? $item - > url : '#';
  // Items in dropdowns use .dropdown-item instead of .nav-link.
  if ($depth > 0) {
    if ($args - > has_children) {
      $atts['class'] = 'dropdown-toggle';
    } else {
      $atts['class'] = 'dropdown-item';
    }
  } else {
    $atts['class'] = 'nav-link';
  }
}

最后添加了这个样式来定位子菜单：

    .navbar-expand-md .navbar-nav ul.dropdown-menu> li > ul.dropdown-menu {
        position: absolute;
        top:0px;
        border-radius: 0;
        left: 100%;
        padding-top:0;
        padding-bottom:0;
        min-width: 150px;
    }