スクロールなしでBeautifulHugoのモバイルハンバーガーメニューにすべてのメニュー項目を表示する方法

Hugoの静的ウェブサイトにBeautifulHugoテーマを使っている場合、メインメニューの項目が多い（例えば11個以上）と、モバイル表示（いわゆる「ハンバーガーメニュー」）で全ての項目が一度に表示されず、最初の7～8項目のみが見えて、残りはスクロールしないと見えなくなる。

これは、サイト内のすべてのセクションへ簡単にアクセスしたい場合には、ユーザー体験としてあまり良くない。本記事では、スマートフォン画面でもすべてのメニュー項目をスクロールせずに表示できる、シンプルなCSSのカスタマイズ方法を紹介する。

問題点

• デフォルトでは、BeautifulHugoのモバイルナビゲーションは高さが固定されている。
• メニュー項目が多すぎる場合、余分な項目は隠れてしまい、スクロールしないと見ることができない。
• そのため、サイトのナビゲーションがわかりにくくなったり、使いづらくなったりする。

解決策：モバイルメニューのCSSを調整

すべてのメニュー項目を一度に表示するには、CSSでモバイルメニューの高さや表示の制限をオーバーライド（上書き）する。

手順

カスタムCSSファイルの作成または編集

すでに/static/css/custom.cssがあれば、それを開く。なければ、Hugoのサイトディレクトリ内に新規で作成する。

以下のCSSを記述

@media (max-width: 768px) {
  .navbar-collapse {
    max-height: 100vh !important; /* メニューを画面全体の高さに */
    overflow-y: auto !important;  /* 必要に応じて縦スクロールを有効に */
  }
  /* （任意）各メニュー項目のサイズを小さくする */
  .navbar-nav > li > a {
    font-size: 15px;
    padding: 10px 12px;
  }
}

カスタムCSSファイルをサイトに読み込ませる

このファイルをサイト設定ファイル（hugo.tomlなど）で読み込ませる。BeautifulHugo用のhugo.toml例：

[params]
  customCSS = ["css/custom.css"]

サイトの動作確認
サイトをローカルでビルド＆サーブし、スマホで開くか、ブラウザの幅を縮めてモバイル表示にする。

ハンバーガーメニューをクリックすれば、全項目が表示される／画面内でスクロール可能になっているはず。

追加アドバイス

• もし11個でもまだ収まらないと感じた場合は、上記CSSのpaddingやfont-sizeをさらに調整する。
• もっと項目が多い場合は、モバイル用にメニューを全画面表示にしたり、2段組に変更したり、階層化（ドロップダウン化）を検討してみても良いだろう。

まとめ

このように、少しCSSを調整するだけでモバイルでもすべてのメニューリンクにアクセスしやすくなり、サイトの利便性が大幅に向上する。BeautifulHugoテーマはカスタマイズ性が高いため、自分のスタイルに合わせてちょっとしたCSS変更を加えるのもおすすめだ。