サイトのページ上部に主なページへのリンクを設けて見やすくしました。
PC はこんな感じ。
モバイル。
メニューからグローバルナビを作成
どのテーマでも作成方法は共通です。
ダッシュボード→外観→メニューをクリック。
メニュー名を「グローバルナビ」など自分が分かりやすい名前を付けます。
メニューの位置を「ヘッダーナビ（グローバルナビ）」にチェックを入れたら「メニューを作成」をクリック。
グローバルナビの項目を設定する
ホームを追加
左側にある「メニュー項目を追加」の「カスタムリンク」にURLや文字列を入れたら「メニューに追加」をクリック。
「ホーム」が追加されました。メニューの位置を確認したら「メニューを保存」をクリックします。
カテゴリーを追加
「カテゴリー→北海道→メニューに追加」をクリック。
「北海道」が追加されました。
こんな感じでどんどん追加していき、最後に「メニューを保存」をクリックします。
項目はドラッグで自由に移動できる
グローバルナビは通常のカテゴリー設定とは異なりますので、カスタムリンクや固定ページなども貼り付けて自由に組み合わせることができます。
項目の名前は変更できる
たとえば「電車/バス/飛行機」は長いので「交通」に変更しました。
アイコンを表示させる
ホームをアイコンで表示させてみました。「Font Awesome→homeで検索→コードをナビゲーションラベルに貼り付け」。
テーマCocoonでメニューカスタマイズ
「Cocoon設定→ヘッダー」からグローバルナビの色や幅を変更することができます。
テーマルクセリタスでメニューカスタマイズ
外観→ルクセリタス子テーマの「カスタマイズ」をクリック。
「グローバルナビ（ヘッダーナビ）」→「グローバルナビ表示」にチェックを入れて、位置などを設定したら「公開」をクリック。
また、下の方にある項目からナビの文字の色やホバーの設定をすることができます。
カテゴリーが複数あるものは黒くなる
これがイヤだったので直しました。
「ナビカレント文字色を黒」「ナビカレント背景色を白」にしました。
全て同じ背景色となりました。
CSSでカスタマイズ
CSS にコードを記述して、太文字をやめて、文字を少し大きめにしました。
/*ヘッダーメニュー*/
.navi-in ul li{
height: 80px;
line-height: 80px;
}
.navi-in .menu-header .item-label{
font-size: 19px;
font-weight: 500
}
