「TCD AWARD 2023」受賞サイトを発表しました。

ワードプレステーマ別

TCDテーマHORIZON:モバイルサイズ用メニューの背景色・文字色を変更する方法

Q.スマホ表示時のドロワーメニューの背景色と文字色を変更したいです。

A.下記の方法でご対応ください。

外観>カスタマイズ>追加CSSに入力してください。

@media screen and (max-width: 1301px){
  #drawer_menu { background: 〇; }
  #drawer_menu a,
  #drawer_menu_sns.color_type1 a:before,
  #drawer_menu_search .button_area:before,
  #drawer_menu .close_button:before { color: ●; }
  #drawer_menu .menu li.menu-item-has-children > a > .button:before,
  #drawer_menu .menu li.menu-item-has-children > a > .button:after { background: ●; }
  #drawer_menu .menu ul ul { background-color: ◎; }
}

〇(背景色)・●(文字色・アイコン色)・◎(ドロップダウンメニューの背景色)を任意のカラーコードに変更してください。
なお、カレント表示にはTCDテーマ>基本設定>カラーの「アクセントカラー」が適用されます。

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事