LION MEDIAのグローバルナビメニューの色を変える
LION MEDIAのグローバルナビメニューの背景色を変えたいとのコメントを頂いたので、その部分だけサクっと方法を紹介します。
↓
CSSを追記
外観→テーマエディター からstyle.cssに追記します。
背景色
「#XXXXXX」の部分はお好きなカラーコードを指定して下さい。
#extra__menu{width:100%;background:#XXXXXX;text-align:center;}
余白と文字色
「#XXXXXX」の部分はお好きなカラーコードを指定して下さい。
.globalNavi__list .menu-item{color:#XXXXXX !important; padding:15px 20px;}こちらは「!important」を記述しないと反映されなかったので、入れて下さい。
padding:15px 20px; の部分はお好きなサイズに変更して下さい。
上記の例だと上下が15px、左右が20px になります。
ちなみにPadding指定は以下の通りです。
値を1つ指定： 指定した値が[上下左右]
値を2つ指定： 記述した順に[上下][左右]
値を3つ指定： 記述した順に[上][左右][下]
値を4つ指定： 記述した順に[上][右][下][左]
値を2つ指定： 記述した順に[上下][左右]
値を3つ指定： 記述した順に[上][左右][下]
値を4つ指定： 記述した順に[上][右][下][左]
結果
PC
スマホ
モバイル端末用のメニューは用意されていないので、メニューは１種類になります。
その為、メニューが長いとモバイル画面ではグローバルメニューの下に横スクロールバーが出ます。
アイコンフォントにするなど工夫すれば小さく収める事も出来ます。
たとえば「HOME」ボタンであればナビゲーションラベルに以下をセットします。
<i class="fas fa-home"> </i>
グローバルナビゲーションにアイコンフォントを使う方法は以下も参考にして下さい。
色変更には以下もご利用下さい。
CSSが反映されない場合
CSSコードを記述したのに変化がない場合は、キャッシュをクリアして下さい。
以下も参考にして下さい。
簡単ですが、以上です。