Diviのレスポンシブナビゲーションメニューの修正

すべての画面サイズで見栄えのするレスポンシブナビゲーションメニューを作成するのは難しい場合があります。 それほど重要ではないことを願っていますが、ナビゲーションは通常、サイトのすべてのページの上部にあるため、すべてのページで最初に表示されるものです。 したがって、それを正しく行うことが重要です。 ありがたいことに、Diviのテーマカスタマイザーを使用すると、いくつかの非常に優れたヘッダーオプションを使用してプライマリメニューをカスタマイズできます。 ただし、左側にロゴがあり、右側にメニューリンクがあるデフォルトのメニュースタイルの場合、特にヘッダーにリンクが多すぎる場合は、小さい画面サイズで簡単にシャッフルされる可能性があります。 私はそれが私にとってたくさん起こることを知っています。 デスクトップにぴったりのメニューが表示されたら、タブレット（特にiPad Pro）で確認すると、ロゴがメニューと重なっていて、一部のリンクが1行下にジャンプしています。

今日は、それほど一般的ではない画面サイズでも見栄えがするように、混雑したナビゲーションメニューに役立つソリューションをいくつか紹介します。 結局のところ、少なくとも一部のユーザーにとって、サイトの信頼性はそれに依存しています。

始めましょう。

Diviのレスポンシブナビゲーションメニューの修正

私たちのYoutubeチャンネルを購読する

混雑したナビゲーションメニューの4つのソリューション

Diviの優れた点の1つは、メディアクエリ（コンパートメント化されたCSS）を使用してさまざまな画面サイズに合わせてサイトのスタイルを調整する流動的なグリッドレイアウト上に構築されていることです。 これらの調整が行われるポイントは、ブレークポイントと呼ばれるものです。 すべての画面サイズでメインナビゲーションメニューを完成させることに専念している場合は、メディアクエリを使用してメニューをカスタマイズし、特定のブレークポイントを調整する必要がある可能性があります。

問題

Diviのデフォルトのナビゲーションメニューを使用するときに遭遇する最も一般的な問題は、クライアントが多くのトップレベルのメニュー項目を必要としている場合です。 メインナビゲーションメニューに5つを超えるメニュー項目がある（またはフォントサイズが大きいメニュー項目がある）と、画面サイズが980〜1100ピクセル（小さなラップトップのサイズ）の幅に達すると、改行と拡大されたロゴが作成されることがよくあります。および大型タブレット）。 気づかなかったとしても、以前にこの問題が発生したことがあると確信しています。 これは次のようになります。

理想的ではありません。 それでは、この問題の4つの解決策を見てみましょう。

解決策1：メニューバーを全幅にする

通常、サイトの残りの部分も全幅にする場合を除いて、ナビゲーションメニューを全幅にすることはお勧めしません。 デザインの一貫性が重要だと思います。 ただし、ナビゲーションメニューがすべてのデバイスで見栄えがよいことを意味する場合は、妥協案を作成することをお勧めします。 そして、それも簡単な修正です。

[テーマカスタマイザー]> [ヘッダーとナビゲーション]> [プライマリメニューバー]に移動し、[全幅にする]を選択します。

解決策2：ロゴとフォントの設定を調整します。

この問題に対するもう1つの簡単な解決策は、テーマカスタマイザー設定を使用して、デフォルトのロゴの最大高さ、テキストサイズ、またはフォントオプションを調整することです。

簡単に修正するためにロゴやメニュー項目のデザインと読みやすさを損なうことは決してないので、これらのオプションを調整するときは注意してください。

解決策3：新しいブレークポイントにモバイルメニューを表示する。

Divi内の各ブレークポイントの一般的な範囲は次のとおりです。

大型デスクトップ：1405px以上
標準デスクトップ：1100px〜1405px
ノートパソコンと大型タブレット：980px〜1100px
タブレット：768pxから980pxの間
スマートフォンと小型タブレット：320pxから768pxの間。
スマートフォン：320pxから480pxの間;

デフォルトのナビゲーションメニューが（ハンバーガーナビゲーション付きの）モバイルメニューに変わるブレークポイントは980pxです。 980px未満の画面サイズでは、モバイルメニューが表示されます。

ただし、奇妙なメニューの改行を避けたい場合は、ブレークポイントを別の値に変更します。 モバイルメニューを980pxではなく1024px前後で表示したいとします。 これを行うには、メディアクエリ内にカスタムCSSを挿入して、Diviのデフォルトのスタイルを上書きする必要があります。

[テーマカスタマイザー] > [追加のCSS]に移動し、次のように入力します。

@media (max-width: 1024px) {
 #et_mobile_nav_menu {
 display: block;
 }

#top-menu {
 display: none;
 }
 }

このメディアクエリは2つのことを行います。 通常のメニューを非表示にし、1024pxのブレークポイントにモバイルメニューを表示します。

解決策4：特定のブレークポイントでメニュースタイルを調整する

このソリューションは、特定のブレークポイントでメニューを最大限に制御できるため、おそらく最良のオプションです。 cssクラスを使用してメニュー項目をターゲットにし、メディアクエリでカスタムスタイルを作成できます。

メニュー項目のDiviのデフォルトCSSは次のとおりです。

#top-menu li {
    display: inline-block;
    padding-right: 22px;
    font-size: 14px;
}

メニューのフォントサイズをデフォルトで18pxにしたいが、特定のブレークポイントで14pxに変更したいとします。 さらにスペースを節約するために、パディングを22pxではなく15pxに減らすことができます。 これを行うには、すべてのメニュー項目のcssクラスをターゲットにして、メディアクエリを作成します

[テーマカスタマイザー]> [追加のCSS]に移動し、次のように入力します。

@media (max-width: 1200px) {
 #top-menu li, #top-menu li a {
 font-size: 14px;
 padding-right: 15px;
 }
 }

このCSSが行うことは、1200px以下の画面で、フォントサイズを14pxに、右側のパディングを15pxに変更することです。 これにより、デスクトップの画面サイズを調整するときにスムーズな移行が作成され、大きなタブレットや小さなラップトップでデフォルトのナビゲーションを維持できます。

他のヘッダースタイルの調整

Diviのテーマカスタマイザー内から選択できるヘッダースタイルは5つあります（垂直ナビゲーションはカウントされません）。 5つのスタイルには、デフォルト（この投稿ですでに取り上げたもの）のスライドイン、フルスクリーン、中央揃え、および中央揃えのインラインロゴが含まれます。

スライドインとフルスクリーンスタイル

スライドインスタイルまたはフルスクリーンスタイルのいずれかを必要とするWebサイトのデザインの場合、モバイルナビゲーションハンバーガーアイコンを使用してすべての画面サイズでメニューをトリガーするため、レスポンシブメニューはほぼ確実です。

中心のスタイル

中央揃えのスタイルを使用している場合は、メニューアイテムを呼吸するためのより多くのスペースがありますが、それでもさらにスペースが必要な場合は、デフォルトのスタイルに使用したのと同じカスタムソリューションを使用して、希望どおりの外観にすることができます。

中央揃えのインラインロゴスタイル

最後に、中央に配置されたインラインロゴスタイルのヘッダーは、最初から正しく理解するのが少し難しいです。 ロゴをページの中央に配置する場合は、いくつかのことを正しく行う必要があります。 まず、真ん中のロゴが目玉のままになるように、偶数のメニュー項目を用意する必要があります。

次に、各メニュー項目に使用するテキストの量によって、ロゴの中心点が決まります。 片面にテキストが多い場合、ロゴは少しずれます。 これはほとんどの状況で大したことではありませんが、ロゴのすぐ下に中央の要素を持つヘッダーがある場合、これは修正が必要な明らかな問題になる可能性があります。

ヘッダーセクションの中央に配置されたロゴと比較して、メニューの中央にロゴが少しずれていることに注目してください。

次に、メニュー項目のラベル「情報要素」を「情報」に短縮します。 次に、ロゴがどのように中央に移動するかを見てください。

このソリューションは、必要な場所にロゴを取得するために必要なすべてである可能性があります。 「AboutUs」から「About」、またはその逆のような変更を行って、これらの小さな調整を行うことができる場合があります。

しかし、あなたが完璧主義者である場合、これは少しイライラする可能性があります（私はそれの瞬間を持つことができます。私を信じてください）。したがって、さらに調整を加えたい場合は、より深いレベルのカスタマイズを行うことができます。 メニュー項目の実際のテキストを調整してロゴの中心点を調整する代わりに、カスタムcssクラスを任意の項目に追加して、右または左にパディングを付けることができます。 これはあなたが物事をすべて中心に置くために必要な最後の微調整を与えるはずです。

WordPressダッシュボードから[外観]> [メニュー]に移動し、[画面オプション]領域で[CSSクラス]がオフになっていることを確認します。

次に、ターゲットにするメニュー項目を切り替えて開きます。 次に、CSSクラスを[CSSクラス]入力ボックスに入力します。 私は私のことを「ナッジ」と呼んでいます。

その後、 [Divi]> [Theme Customizer]> [Additional CSS]に移動し、次のカスタムCSSを追加します。

#top-menu li.nudge  {
padding-right: 32px;
}

このcssでは、クラス「nudge」のアイテムにのみ32pxの右パディングが与えられます。 これにより、ロゴが中央に配置されるのに十分なだけ押し上げられます。

それでおしまい！

まとめ

Diviは、ウェブサイトの構築を楽しく簡単にします。 しかし、時々、仕事（そして私たちのクライアント）の要求は私たちのサイトが恒星であることを確認するために私たちが余分な努力をすることを要求します。 そして、優れたサイトと優れたサイトを区別するのは、細部です。 レスポンシブナビゲーションメニューの実行方法は、正しく理解したい重要な詳細の1つです。 ほとんどの場合、それはユーザーがサイトのすべてのページで最初に目にし、関与するものです。 メニューが壊れていると、第一印象が悪くなる可能性があります。 この投稿があなたを正しい方向に「ナッジ」するのに役立つことを願っています（申し訳ありませんが自分自身を助けることができませんでした:)）。

この投稿では取り上げなかった問題や解決策が他にもあると確信しています。 コメント欄に気軽に投稿してください。 あなたからの便りを楽しみにしています。

乾杯！