Sub-Menu Tema Understrap Terlihat Aneh

Saya menggunakan tema Understrap di situs Wordpress saya dan mencoba menerapkan submenu (di sini www.irricad.com , entri Video di menu Dukungan).

Seperti yang Anda lihat, submenu berada di atas menu utama sehingga mengaburkan beberapa entri dan mencegah navigasi yang benar. Saya ingin tampilannya di sebelah kanan seperti submenu yang 'tepat' (dan lebih disukai panah kecil yang menunjukkan submenu).

Submenu memiliki kelas yang sama dengan item menu utama, jadi saya tidak tahu cara menampilkannya secara berbeda. Apakah saya memerlukan CSS tambahan? apakah ada sesuatu yang saya lewatkan dalam konfigurasi menu di back-end? Apa yang membuat Wordpress mengetahui bahwa ini adalah submenu, selain level bersarang, jika tidak mendapatkan kelas yang berbeda?


wordpress themes css submenu
person Kyudos    schedule 14.04.2021    source sumber

Jawaban (1)


arrow_upward
0
arrow_downward

Saya menemukan jawabannya. Saya mengubah kedalaman menu tajuk tema saya menjadi 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(),
    )
  ); ?>

Saya mengubah navwalker.php saya menjadi ini (untuk menambahkan gaya sakelar ke anak dengan anak-anak):

// 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';
  }
}

Dan terakhir menambahkan gaya ini untuk memposisikan submenu:

    .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