[ 解決済 ] 固定ページにてOuterブロックをヘッダー固定したい

VWSとは フォーラム Lightning [ 解決済 ] 固定ページにてOuterブロックをヘッダー固定したい

[ 解決済 ] 固定ページにてOuterブロックをヘッダー固定したい

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

    博之上田
    参加者

    ■ WordPress のバージョン
    6.3.1

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

    ■ テーマの種類
    Lightning ( G3 ) + Lightning G3 Pro Unit

    ■ テーマのバージョン
    Lightning バージョン: 15.12.1

    ■ Pro Unit のバージョン
    バージョン 0.25.1

    ■ スキンの種類
    Origin III

    ■ プラグインの種類・バージョン
    Blocks Animation: CSS Animations for Gutenberg Blocks
    Contact Form 7
    Contact Form 7 Multi-Step Forms
    Lightning G3 Pro Unit
    Popup Maker
    SiteGuard WP Plugin
    UpdraftPlus
    VK All in One Expansion Unit
    VK Block Patterns
    VK Blocks Pro

    ■ 期待する動作
    固定ページの先頭に表示させたOuterBlockで作成したメニューをスクロールしても常時表示させたい。
    (幅はコンテンツ全体の幅で表示したい)

    ■ 自分で試した事
    実施事項1

    固定ページにてOuterブロックをヘッダー固定したい


    に記載の下記CSSを設定

    selector{
    position: fixed !important;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10;
    margin:0 auto;
    box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
    } 
    
    /*管理画面が編集しずらいので追加*/
    .editor-styles-wrapper selector{
    position: relative !important;
    }

    実施事項2
    上記以外に、カラムをグループ化してから上記CSSを記載したり、カラム毎にCSSを記載したりしましたがうまくいきませんでした。

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

    ■ 実際の症状
    (1)メニューの幅が、コンテンツ全体の幅ではなくブラウザの幅いっぱいに広がる
    (2)上側のカラム(FBとInstaのアイコンがある部分)が表示されない。

    ■ その他特記事項
    下記URLのページを開くパスワードは、添付ファイルに記載。

    非表示設定で、下記4項目にチェックを入れています。
    ・ヘッダーを表示しない
    ・ページヘッダーを表示しない
    ・パンくずリストを表示しない
    ・フッダーを表示しない

    Attachments:
    You must be logged in to view attached files.

    該当URL : https://*********

    ※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

    #79767

    該当URL のページのソースには CSS が出力されていませんので、
    CSS を書いた場所が間違っている可能性があります。

    Outer ブロックの カスタム CSS に書くのが正しいです。
    添付画像をご参照ください。

    Attachments:
    You must be logged in to view attached files.
    #79769

    博之上田
    参加者

    対馬さん
    ご指摘ありがとうございます。
    ご指摘のところにCSSを記載したら表示が崩れるのでCSSを消去していました。

    記載しましたので、お手数ですがもう一度見ていただけると嬉しいです。

    #79773

    ご指摘のところにCSSを記載したら表示が崩れるので

    という認識をお持ちのようですが、現状、CSS が正しく適用されています。

    この状態から、ご希望に合うようにさらに CSS で調整していくことになります。

    (1)メニューの幅が、コンテンツ全体の幅ではなくブラウザの幅いっぱいに広がる

    width: 100%; により画面幅いっぱいに広がっていますので、
    コンテンツ幅に合わせるためには、
    width: 1110px; のように幅を指定する必要があります。

    (2)上側のカラム(FBとInstaのアイコンがある部分)が表示されない。

    私のブラウザでは表示されています。

    おそらく、ログインした状態でツールバーの後ろに隠れているのではないかと推測します。

    #79776

    博之上田
    参加者

    対馬さん

    下記CSSに修正したら、思う通りに表示できました。
    ご確認ありがとうございました。

    selector{
    position: fixed !important;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 1110px;
    z-index: 10;
    margin:0 auto;
    box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
    } 
    
    /*管理画面が編集しずらいので追加*/
    .editor-styles-wrapper selector{
    position: relative !important;
    }
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • このトピックに返信するにはログインが必要です。