[ 解決済 ] 固定ページにてOuterブロックをヘッダー固定したい
[ 解決済 ] 固定ページにてOuterブロックをヘッダー固定したい
- このトピックには4件の返信、2人の参加者があり、最後に
により3年前に更新されました。
-
投稿
-
■ 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で作成したメニューをスクロールしても常時表示させたい。
（幅はコンテンツ全体の幅で表示したい）■ 自分で試した事
実施事項１
に記載の下記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; }実施事項２
上記以外に、カラムをグループ化してから上記CSSを記載したり、カラム毎にCSSを記載したりしましたがうまくいきませんでした。■ 症状が発生するブラウザ
Mac Safari、Chrome■ 実際の症状
（１）メニューの幅が、コンテンツ全体の幅ではなくブラウザの幅いっぱいに広がる
（２）上側のカラム（FBとInstaのアイコンがある部分）が表示されない。■ その他特記事項
下記URLのページを開くパスワードは、添付ファイルに記載。非表示設定で、下記４項目にチェックを入れています。
・ヘッダーを表示しない
・ページヘッダーを表示しない
・パンくずリストを表示しない
・フッダーを表示しない該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます
該当URL のページのソースには CSS が出力されていませんので、
CSS を書いた場所が間違っている可能性があります。Outer ブロックの カスタム CSS に書くのが正しいです。
添付画像をご参照ください。ご指摘のところにCSSを記載したら表示が崩れるので
という認識をお持ちのようですが、現状、CSS が正しく適用されています。
この状態から、ご希望に合うようにさらに CSS で調整していくことになります。
（１）メニューの幅が、コンテンツ全体の幅ではなくブラウザの幅いっぱいに広がる
width: 100%;により画面幅いっぱいに広がっていますので、
コンテンツ幅に合わせるためには、
width: 1110px;のように幅を指定する必要があります。（２）上側のカラム（FBとInstaのアイコンがある部分）が表示されない。
私のブラウザでは表示されています。
おそらく、ログインした状態でツールバーの後ろに隠れているのではないかと推測します。
対馬さん
下記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; }
- このトピックに返信するにはログインが必要です。
