メインナビゲーション（グローバルメニュー）をカスタマイズしたい
TCDテーマNANOのページ上部のメインナビゲーション（グローバルメニュー）をカスタマイズしたくていろいろ触っているので覚書。
ここでは、ページ上部のメインナビゲーションをサイトタイトル名の横に持ってきたくて試行錯誤する記事です。
他のNANOテーマの設定、カスタマイズは下記ページをご覧ください。
メニューをタイトル横にもってくるにあたり、キャッチフレーズ、検索フォーム、言語リンクは不要になるので、ダッシュボードのTCDテーマオプションからそれぞれ項目を非表示にしておく必要があります。その紹介もしています。
ヘッダーの構成をチェックする
NANOのデモサイトのソースコードをチェックしました。
headerのなかにサイトタイトルやキャッチフレーズなどを表示するためのdivとグローバルメニューを表示するnavがあるので、ここのソースコードをカスタマイズしてあげればよさそう。
子テーマのヘッダーファイルをオーバーライドする
親テーマであるnanoテーマの中にあるheader.phpをコピーして、子テーマの中のfunctions.phpと同じ階層にペースト。
ナビゲーションコードをカット
header.phpの下の方にある下記のコードをカット。
<nav id="js-header__nav" class="l-header__nav">
<?php wp_nav_menu( $args ); ?>
<button id="js-header__nav-close" class="l-header__nav-close p-close-btn"><?php _e( 'Close', 'tcd-w' ); ?></button>
</nav>
<?php get_template_part( 'template-parts/megamenu' ); ?>
カットしたコードをペーストする
そのあとlogoのコードとキャッチフレーズのコードの間にペーストします
<?php get_template_part( 'template-parts/logo' ); ?>
<nav id="js-header__nav" class="l-header__nav">
<?php wp_nav_menu( $args ); ?>
<button id="js-header__nav-close" class="l-header__nav-close p-close-btn"><?php _e( 'Close', 'tcd-w' ); ?></button>
</nav>
<?php get_template_part( 'template-parts/megamenu' ); ?>
<p class="l-header__desc"><?php echo esc_html( $dp_options['header_catch'] ); ?></p>
そうすると、本来キャッチフレーズがあった箇所にグローバルメニューが移動します。
固定メニューはどうなる？
テーマオプションでナビゲーションを固定（追従メニュー）にしている場合もナビゲーションはついてきます。
あとはスタイルシートを修正して、デザインを整えていくだけですね。
スタイルシートの調整
NANOのテーマのグローバルメニューは、1199px以下はハンバーガーメニューで表示され、1200px以上からメニューが表示されるという仕様。
そのため修正は@media only screen and (min-width: 1200px)の中で調整するのが良さそう。
@media only screen and (min-width: 1200px){
.l-header__logo{ width:20%; }
nav.l-header__nav{ width:80%;}
nav.l-header__nav ul.l-inner{ width: 100%; }
}
ロゴの横幅を20％、ナビゲーションの横幅を80％にしているので、このあたりは適宜調整してもろて。
色変えはテーマオプションの方で対応する方がスムーズだと思います。
グローバルメニュー名を変更する
グローバルメニュー名は「外観」-「メニュー」から変更できるのでテキスト変更で解決。
これでスッキリしました。
headerの高さはスタイルシートの .l-header__inner { height: 100px; } の箇所が影響しているので、もし高さを変えたい場合はここを調整する。
高さ60pxにするとメニューの高さと合う。
が、改行すると行間で高さを保っているのか（？）の影響でサイズ感変わるのでこの辺りはお好みで。
メガメニューのサブメニューの位置がずれる
本来のグローバルメニューがあった位置にドロップダウンメニューやメガメニューも表示されるため、トップからの位置を調整してあげる必要があります。
サブメニューの種類は３種ある
ドロップダウンメニュ、メガメニューAとBがあるので、それぞれを調整してあげるのがよさそう。
高さはツールバーが表示されている場合と表示されていない場合の高さが指定されているので、それぞれ微調整する。
最終的にこうなった
今回カスタマイズしたコードは下記になります。子テーマに書くだけでもとのNANOテーマのデザインをオーバーライドできます。
@media only screen and (min-width: 1200px){
.l-header__inner { height: 60px; }
.l-header__logo{ width:20%; }
nav.l-header__nav{ width:80%;}
nav.l-header__nav ul.l-inner{ width: 100%; }
.p-megamenu01,.p-megamenu02,.admin-bar .p-megamenu01,.admin-bar .p-megamenu02{ top: 60px; }
}
あとは微調整してください。
おまけ：ヘッダーメニューをスライダー上に配置する
ヘッダーの背景をスライド画像にしたかったので、もうすこし触っています。
position:absoluteを使用しつつ、ヘッダーのトップからの位置を調整。あとスライダーのうしろにヘッダーがまわりこまないように、z-indexで調整してあげました。
.l-header { background: none !important; position: absolute; top: 0; z-index: 100; }
.admin-bar .l-header {top: 32px;}
.l-header--fixed.is-active{ background: rgba(255,255,255,0.8) !important; }
@media only screen and (max-width: 1199px) {
}
@media only screen and (min-width: 1200px){
.l-header__inner { height: 60px; }
.l-header__logo{ width:20%; }
nav.l-header__nav{ width:80%;}
nav.l-header__nav ul.l-inner{ width: 100%; }
.p-megamenu01,.p-megamenu02,.admin-bar .p-megamenu01,.admin-bar .p-megamenu02{ top: 60px; }
}
このあたりも、お好みで…。
