Подменю Understrap Theme выглядит странно

Я использую тему Understrap на своем веб-сайте Wordpress и пытаюсь реализовать подменю (здесь www.irricad.com , пункт «Видео» в меню «Поддержка»).

Как видите, подменю располагается поверх главного меню, скрывая некоторые элементы и препятствуя правильной навигации. Я бы хотел, чтобы он отображался справа как «правильное» подменю (и желательно иметь маленькую стрелку, указывающую на подменю).

Подменю имеет тот же класс, что и пункт главного меню, поэтому я не знаю, как заставить его отображаться по-другому. Нужен ли мне дополнительный CSS? есть ли что-то, что я пропустил в конфигурации меню в бэкэнде? Что позволяет Wordpress узнать, что это подменю, отличное от уровня вложенности, если оно не получает отдельного класса?


wordpress themes css submenu
person Kyudos    schedule 14.04.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я понял. Я изменил глубину меню заголовка темы на 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;
    }

person Kyudos    schedule 15.04.2021