[ 解決済 ] ヘッダーメニューをトップの背景画像の上に表示したい

[kiiroitori525]

■ WordPress のバージョン
6.7.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
X-T9

■ テーマのバージョン
1.26.4

■ 期待する動作
デフォルトでは、ヘッダーメニューの下にトップの背景画像が続くことになりますが、ヘッダーメニューをトップの画像背景の上に置きたい。

■ 自分で試した事
ヘッダーメニュー（header.wp-block-template-part）をposition: absolute;にして調整しようとしたが、モバイル版ではうまくいかない。変わらない。

うまくいかないので、トップの画像の上にナビゲーションブロックを置いて、メニューを表示し、ヘッダーメニューは非表示にしようとしたのですが、ヘッダーメニューは非表示設定をしても非表示になりません。
こちらはこのような仕様なのでしょうか。

初心者であれこれ調べて試してはみたのですが、うまくいきません。
とにかくトップの画像背景の上にメニューを置きたいのですが、どうしたらよいのでしょうか。

■ 症状が発生するブラウザ
Chrome

■ 実際の症状
ヘッダーメニューの下にトップの画像が続きます。

[うなこ]

お世話になっております。

ご質問ありがとうございます。

文章だけですと、どうしても認識に違いが出てしまう可能性がございます。もし可能でしたら、画面キャプチャをとっていただき、「ここをこうしたい」といった内容をキャプチャ画像に書き込んでいただけると、回答がしやすくなるかと思います。

また、参考になるサイトのURLを添付していただけると、さらに状況を把握しやすくなります。

ご記載いただいた内容を確認したところ、以下のようなイメージでしょうか？

観光地_着物レンタル（旧JPNSTYLEスキン風）

[kiiroitori525]

早速のご返信ありがとうございます。

そうですね。以下のようなサイトをイメージしています。

HOME

HOME

これらもLightningとX-T9のテーマを使われているようですが、先ほど貼っていただいた「観光地_着物レンタル」のテンプレートを使われているのでしょうか。

できれば有料のテンプレートを使わずに実装したいのですが、簡単にできそうでしょうか。

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

[うなこ]

参考サイトを確認いたしました。

Lightning テーマの Lightning G3 Pro Unit プラグインの場合は、ヘッダー設定のヘッダー透過機能で設定としてあるのですが、X-T9 テーマの場合はCSSでカスタマイズしていただくことになります。

position: absolute;で調整されてモバイルでうまくいかなかったとのことですが、以下のCSSでいかがでしょうか。

header{
    position: absolute;
    z-index: 10;
    left: 0;
    width: 100%;
}

[kiiroitori525]

ちょっと忙しく返信が遅れました。申し訳ございません。

X-T9では、CSSでカスタマイズが必要になるのですね。
position: absolute;で試してみます。

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

[投稿者]

投稿