テーマLightningでヘッダーナビをモバイルで表示する方法

2022年3月27日

テーマLightningのヘッダーナビゲーションは、モバイル時（デバイス幅991.98px以下）にはハンバーガーボタンのみの表示となります。これをパソコン時と同じくメニューを表示する方法を紹介します。

デフォルトの表示

サイトタイトルはロゴ画像に置き替えてあります。

デフォルトのパソコン表示

モバイルでの表示

モバイル表示ではハンバーガーボタンのみの表示となります。

ここからカスタムCSSを使って、パソコンと同じナビゲーションメニューを表示させていきます。カスタムCSSは子テーマのstyle.cssまたはテーマカスタマイザーの追加CSS欄に追記してください（以下の記事が参考になります）。

モバイル時にヘッダーメニューを表示

次のカスタムCSSを適用してみましょう。

/* モバイルでナビゲーションメニューを表示する */
:root {
  --mobile-nav-column-num: 3; /* ナビゲーションの列数*/
  --mobile-nav-list-column-gap: 2px; /* 各メニュー間の横方向Gap*/
  --mobile-nav-list-row-gap: 0.8em; /* 各メニュー間の縦方向Gap */
}
@media (max-width: 991.98px) {
  .global-nav {
    display: block;
    margin-bottom: 0.8em;
  }
  .global-nav-list {
    justify-content: start;
    flex-wrap: wrap;
    column-gap: var(--mobile-nav-list-column-gap);
    row-gap: var(--mobile-nav-list-row-gap);
  }

  .global-nav-list > li {
    padding: 0 !important;
    flex-basis: calc(
      (100% - var(--mobile-nav-list-column-gap) * (var(--mobile-nav-column-num) - 1)) / var(--mobile-nav-column-num)
    );
  }
}

このCSSを適用するとナビゲーションは３列で表示されるようになります。このページのメニュー項目数は５なので３列×２行の表示となります。

３～５行目のCSS変数により、ナビゲーションの列数や各メニュー間のGAPを調整することができます。

CSS変数の説明

各変数は以下の通りです。

• –mobile-nav-colimn-num・・・ナビゲーションの列数を指定
• –mobile-nav-list-row-gap・・・各メニューの縦方向のGAP（余白）の指定
• –mobile-nav-list-column-gap・・・各メニューの横方向のGAP（余白）の指定

各メニュー間のGAPは、見映えを確認しながら適度に調整してください。メニューの項目数やメニューの文字数などによっても適正値は異なります。

例えば列数を３列設定としていても、メニュー内の文字数が多すぎたり横方向のGAPが大き過ぎると、全体の横幅内に入りきらずに段落ちして２列表示となることがあります。

以下は、横方向GAPを徐々に大きくしていった場合です。2px⇒30pxと横方向GAPを大きくしていくと各メニュー項目の横幅が自動的に小さく調整されます。

しかし各メニューの横幅は文字数分より小さくならないため、横方向GAPを60pxと大きく設定してしまうと段落ちして２列表示となってしまいます。

ナビゲーションの列数を変化させてみる

以上を念頭において、ナビゲーションの列数を変化させてみましょう。

ナビゲーションの列数＝２列の場合

• –mobile-nav-colimn-num・・・2
• –mobile-nav-list-column-gap・・・40px

メニューアイテム数が５つなので、２列×３行の配置となります。

ナビゲーションの列数＝４列の場合

• –mobile-nav-colimn-num・・・4
• –mobile-nav-list-column-gap・・・1px

このサイトではメニューアイテム数が５つしかないので４列化することはないと思います。あくまで例として考えてください。

個人的にはタブレットのことを考慮すると３列が汎用性があるかな、て感じです。

まとめ

最後に別記事で紹介したヘッダーレイアウトの調整CSSと今回のCSSを合わせた、私のおすすめCSSを紹介しておきます。このCSSだとパソコンからモバイルまで比較的メニューアイテム数が多くても表示しやすいかと思います。

/* サイトロゴとヘッダーナビを縦に積む */
div#site-header-container {
  display: block;
  text-align: center;
}
/* ヘッダーナビをコンテンツ幅いっぱいに広げる */
body:not(.header_scrolled) .global-nav--layout--float-right {
  display: block;
  width: 100%;
}
.global-nav-list {
  justify-content: space-between;
}
/* サイトロゴを中央配置とする */
.site-header--layout--nav-float .site-header-logo {
  display: inline-block;
  width: auto;
}
/* スクロール時にロゴ画像を非表示とする */
.header_scrolled .site-header-logo {
    display: none;
}

/* モバイルでナビゲーションメニューを表示する */
:root {
  --mobile-nav-column-num: 3; /* ナビゲーションの列数*/
  --mobile-nav-list-column-gap: 2px; /* 各メニュー間の横方向Gap*/
  --mobile-nav-list-row-gap: 0.8em; /* 各メニュー間の縦方向Gap */
}
@media (max-width: 991.98px) {
  .global-nav {
    display: block;
    margin-bottom: 0.8em;
  }
  .global-nav-list {
    justify-content: start;
    flex-wrap: wrap;
    column-gap: var(--mobile-nav-list-column-gap);
    row-gap: var(--mobile-nav-list-row-gap);
  }

  .global-nav-list > li {
    padding: 0 !important;
    flex-basis: calc(
      (100% - var(--mobile-nav-list-column-gap) * (var(--mobile-nav-column-num) - 1)) / var(--mobile-nav-column-num)
    );
  }
}