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

ワードプレステーマ別

TCDテーマLOTUS:スマホ表示時のハンバーガーメニューまわりの背景色や文字色を変更する方法

Q.スマホで閲覧した際のヘッダーの三本線メニュー(ハンバーガーメニュー)を開いたときの背景色や文字色を変更したい。

<変更箇所イメージ>
変更箇所イメージ

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

以下の記述を外観>TCDテーマオプション>基本設定のカスタムCSSに入力して表示をご確認ください。

@media screen and (max-width: 770px){
  a.menu_button:before { color: ○; } /* 三本線の色 */
  #global_menu a { color: ○; background: ○; } /* 背景色と文字色 */
  #global_menu ul ul a { background: ○; } /* 副項目の背景色 */
  .mobile #global_menu li a:hover { background: ○; } /* タップ時の背景色 */
}

※○を任意のカラーコードに置き換えてください。

メニューを開いたときの三本線の背景色には、外観>TCDテーマオプション>基本設定>色の設定の「メインカラー」が適用されます。サイトに統一感を持たせるため、ここはそのままメインカラーを適用されることをおすすめします。

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

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

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