トップページのスライドタイトルやページヘッダータイトルがモバイルでスクロールするとずれる現象を修正したい

このトピックには1件の返信、2人の参加者があり、最後に対馬俊彦により5時間、 25分前に更新されました。

2件の投稿を表示中 - 1 - 2件目 (全2件中)

投稿者

投稿
2025年3月16日 9:15 AM #107126

uchidaplanning
参加者

■ WordPress のバージョン
6.7.2

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

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

■ テーマのバージョン
15.29.4

■ Pro Unit のバージョン
0.29.2

■ スキンの種類
Origin III

■ プラグインの種類・バージョン
・All In One WP Security
バージョン 5.3.8
・Contact Form 7
バージョン 6.0.5
・Enable Media Replace
バージョン 4.1.5
・Flexible Table Block
バージョン 3.4.0
・MetaSlider
バージョン 3.96.0
・SVG Support
バージョン 2.5.14
・Yoast Duplicate Post
バージョン 4.5

■ 期待する動作
現在制作中のWEBサイトにおいて
・トップページスライドショー内の「スライドタイトル」
・各ページのページヘッダー内のテキスト
がスマホ表示でスクロールしたときに上下にずれる現象が発生しているため、固定されるようにしたい。

■ 自分で試した事
・[ヘッダー設定]-[ヘッダー透過]-[ヘッダー透過を有効にする]にて「トップページ」or「全てのページ」を選択した場合に発生する。

・[ヘッダー設定]-[ヘッダー透過]-[ヘッダー透過を有効にする]にて「透過しない」
→現象が発生しない。

・固定ページで該当エリアかと思われたCSSを調整したが、改善されず
.page-header-inner [
margin-top: unset !importan;
margin-bottom: unset !importan;
]
.page-header [
height: unset !importan;
]

■ 症状が発生するブラウザ
Safari・Chrome（スマホ版）

■ 実際の症状
・トップページスライドショー内の「スライドタイトル」
・各ページのページヘッダー内のテキスト
がスマホ表示でスクロールしたときに上下にずれる

URL

HOME

スマホの実機で表示確認した際に発生する症状です。

■ その他特記事項
何らかの設定で解決しそうな気がして、いろいろと調べたのですが、解決策を見つけることができませんでした。
私の環境のみで発生する症状でしょうか。。。

2025年3月16日 12:10 PM #107128
対馬俊彦
参加者
制作実績
私の環境のみで発生する症状でしょうか。。。

私のサイトでもアップデートしたら症状が起きるようになりました。

とりあえず、以下の CSS を書いて対策しています。
```
@media (max-width: 991.98px) {
  #site-header {
    position: absolute;
  }
}
```
この CSS を使う場合、修正されたらこの CSS を忘れずに削除してください。
投稿者

投稿