FROM CACHE - jp_header

Dawn 11.0.0 ヘッダーにある検索アイコンをクリックした際の検索窓内の背景を透明ではなく、白にしたい

猫好き初心者
Shopify Partner
12 0 0

Dawn 11.0.0を使用しています。

PCの場合、ヘッダーにデフォルト付いている検索アイコンをクリックすると背景が透過された検索窓が表示されるため、ヘッダメニューが後ろに丸見え状態になっています。

文字を入力し始めてもメニューが見えている状態で、入力したテキストとかぶってしまっています。

そのため、検索窓の背景を白にして後ろに文字が透けて見える状態をなんとかしたいです。

 

component-search.cssあたりをいじるのかなと、以下のclassに対して、background-colorで記述してみたのですが、違ったようでした・・・

.search__input.field__input

 

上記実現する方法をご教示いただけますと幸いです。

よろしくお願いいたします。

3件の返信3

Qcoltd
Shopify Partner
1051 429 413

@猫好き初心者 様

 

初期設定ですと、

検索窓のモーダルの背景は透過されないと思いますが、

透過されるように変更された、ということですね。

 

下記を、

テーマカスタマイズ画面にて、

ヘッダーのカスタムCSSに設定されてみてはいかがでしょうか?

.search-modal {
  opacity: 1;
}

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
猫好き初心者
Shopify Partner
12 0 0

ご丁寧にありがとうございます。

メニュー設定時にz-index指定を誤っておりました。

デフォルトでは透過していないとご指摘いただいたおかげで修正すべき箇所に気づけました。

ありがとうございました。

Qcoltd
Shopify Partner
1051 429 413

@猫好き初心者 様

 

なるほどです。

z-indexを変更されていたのですね。

 

検討外れの回答になってしまいましたが、ご自身で解決できたとのことで安心いたしました。

 

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/