ルクセリタスでヘッダーナビ（グローバルナビ）をカスタマイズする

こんにちは！
今日はサイトのヘッダー辺りに配置されるグローバルナビのカスタマイズについてご案内します！
ルクセリタスなら、外観のカスタマイズで選択したり色を選んだりするだけで、簡単に変更することが可能です！
では、始めてみましょう！

グローバルナビをカスタマイズする

デフォルトのデザイン

区切り線を入れて同じ幅にする

開く「外観」「カスタマイズ」「ヘッダーナビ（グローバルナビ）」

ナビゲーションの色を変える

開く「外観」「カスタマイズ」「ヘッダーナビ（グローバルナビ）」

上記の箇所以外も、ライブプレビューを見ながら、自由に色を変えたりサイズを変えたりして好みのデザインにしてくださいね！

ナビゲーションの高さを変える

開く「外観」「カスタマイズ」「ヘッダーナビ（グローバルナビ）」

CSSを編集してカスタマイズする

区切り線にくぼみをつける

CSS子テーマのスタイルシートに追記する

#gnavi div > ul > li > a {
	border-left: 1px solid #5aaaf0; /* ヘッダーカラーに合わせて変更 */
	box-shadow: -1px 0px 0px #1e73be; /* ヘッダーカラーに合わせて変更 */
}
#gnavi div > ul > li:first-child > a{
	border-left: none;
	box-shadow: none;
}
#gnavi li li span {
    border-bottom: 1px solid #5aaaf0; /* ヘッダーカラーに合わせて変更 */
	box-shadow: 0px 0px 2px #1e73be; /* ヘッダーカラーに合わせて変更 */
}

ヘッダーナビの下に影をつける

CSS子テーマのスタイルシートに追記する

/* Header Naviの影 */
#nav {
    box-shadow: 0 4px 6px rgba(0, 0, 0, .30);
}

カスタマイザーに用意されたアニメーションをつける

開く「外観」「カスタマイズ」「アニメーション」 ヘッダーナビ（グローバルナビ）

自分でアニメーションをつける

CSS子テーマのスタイルシートに追記する

/* Header Navi Animation */
#gnavi li a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	border-bottom: 3px solid #fff;
	transition: 0.4s;
}
#gnavi li a:hover:after {
	width: 100%;
}

メニュー構造を変更する

グローバルナビに表示させるメニュー構造を見直す

サイトのコンテンツに合わせて自由に組み合わせましょう。

サンプルです

あとがき

見よう見まねでWordPressを使い始めた頃、メニューってなんぞい？どうやって使うん？と、かなりとっつきにくいものでした。
でも今は、ほほぉ～そんな風にも使えたか！と感心しております。
ルクセリタスなら、孫構造まで表示できるのでバリエーションが広がりますね！

関連帯状メニューのプチカスタマイズはこちらでどうぞ