【てがきノート】モバイル状態の時に背景と同じ柄がヘッダーメニュー入らないようにする方法

てがきノートでは、モバイル状態の時に背景と同じ柄がヘッダーメニュー入るようになっております。

そうでない場合ですと以下のようにまとまりのないデザインとなるためです。

しかしながらグローバルナビ背景色がある場合は必要がない場合もあります。

そのため、モバイル状態の時に背景と同じ柄がヘッダーメニュー入らないようにするために以下のCSSを適用してください。

もしカスタマイザーからの機能追加要望が多い場合は検討します。

モバイル状態の時に背景と同じ柄がヘッダーメニュー入らないようにする方法
ビフォーアフター
1. CSS適用前
2. CSS適用後

モバイル状態の時に背景と同じ柄がヘッダーメニュー入らないようにする方法

タイムラインのタイトル

ステップ1
外観 > カスタマイズをクリック

WordPressにログインして、ダッシュボードで外観 > カスタマイズの順にクリックします。
ステップ1
追加CSSをクリック

カスタマイズの画面から追加CSSをクリックします。

ステップ1

CSSを挿入

CSSの入力欄に↓のコードをコピーして貼り付けます。

@media screen and (max-width: 1023px){
  #navi .navi-in > .menu-mobile li {
    background: none;
    background-image: unset;
    border: none;
  }
}

ステップ4
公開をクリック

左上にある公開をクリックします。

これで完了です！

ビフォーアフター

モバイル状態の時に背景と同じ柄がヘッダーメニュー入らないようにした時のビフォーアフターは以下となります。

CSS適用前

CSS適用後

なお、このカスタマイズにより、何らかの不具合が発生しても

責任は負いかねますのでご了承ください。

モバイル状態の時に背景と同じ柄がヘッダーメニュー入らないようにする方法

ビフォーアフター

CSS適用前

CSS適用後

コメント