Dawn 11.0.0テーマで、ヘッダーの検索アイコンをクリックすると検索窓の背景が透過され、後ろのメニューが見えてしまう問題が報告されました。
提案された解決策:
検索モーダルの透過を防ぐため、以下のCSSコードをヘッダーのカスタムCSSに追加する方法が提示されました:
.search-modal {
opacity: 1;
}
実際の原因:
質問者が確認したところ、メニュー設定時にz-indexの指定を誤っていたことが根本原因でした。デフォルト設定では背景は透過されないため、カスタマイズ時の設定ミスが問題を引き起こしていました。
結果:
質問者自身で修正箇所を特定し、問題は解決されました。
Dawn 11.0.0を使用しています。
PCの場合、ヘッダーにデフォルト付いている検索アイコンをクリックすると背景が透過された検索窓が表示されるため、ヘッダメニューが後ろに丸見え状態になっています。
文字を入力し始めてもメニューが見えている状態で、入力したテキストとかぶってしまっています。
そのため、検索窓の背景を白にして後ろに文字が透けて見える状態をなんとかしたいです。
component-search.cssあたりをいじるのかなと、以下のclassに対して、background-colorで記述してみたのですが、違ったようでした・・・
.search__input.field__input
上記実現する方法をご教示いただけますと幸いです。
よろしくお願いいたします。
@Anonymous_c50f3dd9e28fcafd129d5d8787baecf8 様
初期設定ですと、
検索窓のモーダルの背景は透過されないと思いますが、
透過されるように変更された、ということですね。
下記を、
テーマカスタマイズ画面にて、
ヘッダーのカスタムCSSに設定されてみてはいかがでしょうか？
.search-modal {
opacity: 1;
}
ご参考まで。
(キュー田辺)
ご丁寧にありがとうございます。
メニュー設定時にz-index指定を誤っておりました。
デフォルトでは透過していないとご指摘いただいたおかげで修正すべき箇所に気づけました。
ありがとうございました。
@Anonymous_c50f3dd9e28fcafd129d5d8787baecf8 様
なるほどです。
z-indexを変更されていたのですね。
検討外れの回答になってしまいましたが、ご自身で解決できたとのことで安心いたしました。
(キュー田辺)