スキンでヘッダーモバイルメニューを表示する方法

はじめに
完成イメージ
実装手順
さいごに

はじめに

スキンの仕様により、外観→メニューでヘッダーモバイルメニューを設定しても、デフォルトでは非表示にしています。
これは、モバイル表示時にヘッダーモバイルメニューのサブメニューが展開されないためです。

その代わり、フッターモバイルボタンにメニュー（#menu）を設定し、全てのメニューを表示することを前提としています。

この記事では、ヘッダーモバイルメニューを表示し、メニュー数が多い場合、横スクロールする方法について説明します。

スキン「メイド・イン・ヘブン」のメニュー設定とモバイル表示の最適化について解説。ヘッダーやフッター、モバイルスライドインなどの有効なメニュー枠を整理し、初期値（星アイコン）から快適なナビゲーションへ改善するフッターモバイルボタンの推奨設定方法について纏めました。

完成イメージ

実装手順

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

@media (width <= 1023px) {
  #navi .navi-in > .menu-mobile {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
  }

  .navi .item-label {
    overflow: unset;
  }
}

さいごに

今回紹介した方法を使えば、スキンの制約で非表示になっていたヘッダーモバイルメニューを表示でき、さらにメニュー数が多い場合でも横スクロールで快適に操作できます。
必要に応じてカスタマイズを加えれば、ユーザーにとってより使いやすいナビゲーションを実現できるでしょう。