組み込み設定またはカスタムCSSを使用しますか？
Navi+は、“Design”タブで、背景、タイポグラフィ（フォントファミリー、サイズ..）、アイコン/画像（サイズ、ギャップ、カーブ…）など、メニューのためのいくつかの一般的な設定オプションを提供します。これらの設定を使用することで、メニューは通常、ウェブサイトの全体的なデザインやブランディングに合わせてスタイルを調整できます。
Navi+メニューは最大3レベルをサポートしています。“Design”タブでは、2レベルのスタイルのみを設定でき、レベル2およびレベル3メニューのフォントサイズやアイコン/画像サイズを設定する直接的なオプションはありません。では、どうすればそれができますか？
CSS & コーディングツールによる深いメニューのカスタマイズ
しかし、あなたやあなたのウェブサイトの開発者がCSS（スタイルシート）について基本的な理解を持っている場合、Navi+の組み込み”CSS & Coding”ツールを使用して、テーマファイルを直接編集することなく、メニュー全体のデザインをカスタマイズできます。これにはいくつかの利点があります：
- Navi+メニューのCSS設定をテーマから分離できます。これにより、テーマをアップグレードまたは変更しても、Navi+メニューには影響しません。
- Navi+は、各CSSルールの先頭にプレフィックス（
#SF-123456789のような）を自動的に追加するスマートな保護メカニズムを使用しています。これにより、異なるNavi+メニューのCSSが分離され、スタイルの競合のリスクが最小限に抑えられます。 - 必要に応じて、Navi+内でウェブサイト全体に影響を与えるCSSを追加することもできますが、これは控えめに使用し、必要な場合にのみ行うべきです。
重要な注意事項： 内部スタイルシート / CSSテキストボックスは、各CSSルールの前に自動的にプレフィックス（例：#SF-123456789）を追加します。これにより、あなたのCSSはカスタマイズされている特定のメニューにのみ適用され、スタイルの競合を防ぎます。
CSSを使用したいくつかの典型的なケーススタディ
1) メニュー全体の外観を最高レベルで設定するには、標準CSSではないが非常にシンプルなスニペットを書くことができます。たとえば、以下のスニペットはメニューの背景を赤に変更します。以下のコードを内部スタイルシート / CSSテキストボックスに追加します：
{
background: red;
}
2) 各メニューアイテムレベルのサイズ、タイポグラフィ、色を設定します。以下のコードを内部スタイルシート / CSSテキストボックスに追加します：
// レベル1メニューアイテムのテキストスタイルをカスタマイズ
ul > li.item > .inner .name {
font-size: 14px;
color: red;
}
// レベル2メニューアイテムのテキストスタイルをカスタマイズ
ul.children[menulevel="2"] > li.child > .inner .name{
font-size: 16px;
color: blue;
}
// レベル3メニューアイテムのテキストスタイルをカスタマイズ
ul.children[menulevel="3"] > li.child > .inner .name{
font-size: 13px;
color: green;
}
3) font-weight.を使用してフォントの太さを変更します。以下のコードを内部スタイルシート / CSSテキストボックスに追加します：
// 名前のフォントの太さを設定
.name {
font-weight: 700;
}
// 説明のフォントの太さを設定
description {
font-weight: 700;
}
4) 矢印のサイズを調整します。以下のコードを内部スタイルシート / CSSテキストボックスに追加します：
ul > li.is-parent-top::after {
font-size: 24px !important;
}