グローバルメニューのデザインをテーマに合わせながらかっこよく変更したい時があると思います。
追加CSSにコードを追加することで変更する方法を、下記に記載します。
まずは追加CSSのところまで移動します。
外観 → カスタマイズ → 追加CSS
そこに下記に記載しているコードを追加して適用するだけで、設定することができます。
グローバルメニューをCSSでカスタマイズ
外観 → カスタマイズ → 追加CSS
追加CSSをクリック
追加場所
追加CSSの窓のところまでたどり着いたら、下記コードを貼り付けましょう
/*グローバルメニュー*/
.globalNavi {
width: 100%; →左側からのメニューの距離
margin-top: 4px; →ロゴと文字の距離
}
/*文字色背景色*/
.globalNavi__list li a {
background-color: #213140; →文字枠のカラー
color: #444444; →フォントのカラー
border-radius: 3px; →文字の枠の角を丸める
width: 250px; →文字枠の幅
text-align: center; →テキストの位置
font-size: 20px; →フォンとサイズ
}
/*グローバルメニューマウスオーバー*/
.globalNavi__list li a:hover {
background-color: #8C8C8C →マウスオーバーの際のバックグラウンドのカラー
}
/*グローバルメニューレスポンシブル*/
@media screen and (max-width : 767px){
.globalNavi {
margin-top: 24px;
}
}
.globalNavi {
width: 100%; →左側からのメニューの距離
margin-top: 4px; →ロゴと文字の距離
}
/*文字色背景色*/
.globalNavi__list li a {
background-color: #213140; →文字枠のカラー
color: #444444; →フォントのカラー
border-radius: 3px; →文字の枠の角を丸める
width: 250px; →文字枠の幅
text-align: center; →テキストの位置
font-size: 20px; →フォンとサイズ
}
/*グローバルメニューマウスオーバー*/
.globalNavi__list li a:hover {
background-color: #8C8C8C →マウスオーバーの際のバックグラウンドのカラー
}
/*グローバルメニューレスポンシブル*/
@media screen and (max-width : 767px){
.globalNavi {
margin-top: 24px;
}
}
グローバルメニューのデザインが変わる
ソースコード
/*グローバルメニュー*/
.globalNavi {
width: 100%;
margin-top: 4px;
}
/*文字色背景色*/
.globalNavi__list li a {
background-color: #213140;
color: #444444;
border-radius: 3px;
width: 250px;
text-align: center;
font-size: 20px;
}
/*グローバルメニューマウスオーバー*/
.globalNavi__list li a:hover {
background-color: #8C8C8C
}
/*グローバルメニューレスポンシブル*/
@media screen and (max-width : 767px){
.globalNavi {
margin-top: 24px;
}
}
.globalNavi {
width: 100%;
margin-top: 4px;
}
/*文字色背景色*/
.globalNavi__list li a {
background-color: #213140;
color: #444444;
border-radius: 3px;
width: 250px;
text-align: center;
font-size: 20px;
}
/*グローバルメニューマウスオーバー*/
.globalNavi__list li a:hover {
background-color: #8C8C8C
}
/*グローバルメニューレスポンシブル*/
@media screen and (max-width : 767px){
.globalNavi {
margin-top: 24px;
}
}
参考にしたサイト
https://karaagebow.com/archives/6628