PC画面でもモバイルのスライドインメニューを表示する方法

グローバルナビメニューの横に追加メニューを表示するには、「トップメニュー」が適切です。

以下のコードをfunctions.phpに追加します。

add_filter('wp_nav_menu', function ($output, $args) {
  // メニュー位置「ヘッダーメニュー」以外の場合は処理対象外
  if ($args->theme_location != NAV_MENU_HEADER) {
    return $output;
  }

  ob_start();
  cocoon_template_part('tmp/mobile-sidebar-button');
  $html = ob_get_clean();

  $html = str_replace('li', 'div', $html);

  // メニューの出力末尾にボタンを追加
  return $output . $html;
}, 10, 2);

以下のコードをstyle.cssに追加します。

/* スクロールバー分の余白確保 */
html {
  scrollbar-gutter: stable;
}

.navi-in {
  align-items: center;
  display: flex;
  justify-content: center;

  .sidebar-menu-caption {
    display: none;
  }

  .sidebar-menu-icon span {
    display: block;

    &::before {
      content: '\f0c9';
      display: block;
      font-family: 'Font Awesome 5 Free';
      font-weight: bold;
    }
  }
}

.sidebar-menu-content {
  overflow-x: clip;
}

@media (max-width: 1023px) {
  .navi,
  .navi-menu-content {
    .sidebar-menu-button {
      position: absolute;
      top: -100%;
    }
  }
}