เมนูย่อยของ Understrap Theme ดูแปลก ๆ

ฉันใช้ธีม Understrap บนเว็บไซต์ Wordpress ของฉัน และพยายามใช้เมนูย่อย (ที่นี่ www.irricad.com รายการวิดีโอในเมนูสนับสนุน)

อย่างที่คุณเห็น เมนูย่อยจะอยู่ด้านบนของเมนูหลักเพื่อบดบังบางรายการและทำให้ไม่สามารถนำทางได้อย่างเหมาะสม ฉันต้องการให้แสดงทางด้านขวาเหมือนเมนูย่อย 'เหมาะสม' (และควรมีลูกศรเล็กๆ ระบุเมนูย่อย)

เมนูย่อยมีคลาสเดียวกันกับรายการเมนูหลัก ดังนั้นฉันจึงไม่รู้ว่าจะทำให้แสดงแตกต่างออกไปได้อย่างไร ฉันจำเป็นต้องมี CSS เพิ่มเติมหรือไม่? มีบางอย่างที่ฉันพลาดไปในการกำหนดค่าเมนูในส่วนหลังหรือไม่ อะไรทำให้ Wordpress รู้ว่านี่คือเมนูย่อย นอกเหนือจากระดับการซ้อน หากไม่ได้รับคลาสที่แตกต่างกัน


person Kyudos    schedule 14.04.2021    source แหล่งที่มา


คำตอบ (1)


ฉันคิดออกแล้ว ฉันเปลี่ยนความลึกของเมนูส่วนหัวของธีมเป็น 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