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

VWSとは フォーラム X-T9 [ 解決済 ] ヘッダーメニューをトップの背景画像の上に表示したい

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

  • このトピックには4件の返信、2人の参加者があり、最後にkiiroitori525により2週、 4日前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #104115

    kiiroitori525
    参加者

    ■ WordPress のバージョン
    6.7.1

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

    ■ テーマの種類
    X-T9

    ■ テーマのバージョン
    1.26.4

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

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

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

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

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

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

    #104118

    うなこ
    モデレーター

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

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

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

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

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

    観光地_着物レンタル(旧JPNSTYLEスキン風)

    #104120

    kiiroitori525
    参加者

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

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

    HOME

    HOME

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

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

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

    #104156

    うなこ
    モデレーター

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

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

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

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

    kiiroitori525
    参加者

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

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

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

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • このトピックに返信するにはログインが必要です。