[ 解決済 ] モバイル（スマホ）でLightningのヘッダーを固定したいです。

[joen1900]

■ WordPress のバージョン
WordPress 5.9.2

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

■ テーマの種類
Lightning Pro

■ テーマのバージョン
8.14.1

■ スキンの種類
Origin II

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
モバイル（スマホ）で見たときにLightningのヘッダーを固定したいです。

■ 自分で試した事
機能を探しましたが、わかりませんでした。

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

■ 実際の症状
モバイル（スマホ）でスクロールしたらLightningのヘッダーが移動してしまいます。

---

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

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

[石川＠Vektor,Inc.]

おそらく

画面サイズが小さい場合 {
ヘッダーのセレクタ {
position:fixed;
}
html body {
padding-top:モバイル時のヘッダーの高さ
}
}

できる！CSSカスタマイズ

みたいな内容のCSSを書けばできるのではないかなと思います。
詳細は自分で試すか他の人の回答を…

やってみてうまく出来なかったら、試したコードを貼り付けて再度質問してください。

• この返信は2年前に石川＠Vektor,Inc.が編集しました。

[joen1900]

お世話になります。

TOPページ

で
指示通り
@media screen and (min-width:480px) {
.site-header {
position: fixed;
}
html body {
padding-top: 0px;
}
}
で試しましたが
モバイルでヘッダーは固定されませんでした。

再度、ご回答の程宜しくお願い致します。

[junon]

サイト制作やパソコン指導をビジネスにされている方に対し、既知であり失礼な指摘かもしれませんが

どのセレクタに対し。は別にして
モバイル（スマホ）を、どのような横幅の場合と捉えられているのかわからないにしても、

@media screen and (min-width:480px) {

は480px以上のときに書くもので、
480pxより幅の狭い場合は

@media screen and (max-width:480px) {

と書かないと、たいていの実機では効かないですね。

• この返信は2年前にjunonが編集しました。

[joen1900]

お世話になります。

TOPページ

TOPページ

で
ご指示通り

@media only screen and (max-width: 480px)
{
.site-header {
position: fixed;
}
}

で試しましたが
モバイルでヘッダーは固定されませんでした。

再度、ご回答の程宜しくお願い致します。

[junon]

私は指摘しただけで指示はしていませんが
サイトを確認すると
480px以下をモバイル（スマホ）とするならば、
今回の書き方で、.site-headerは固定され効いていますよ。

あとは、
非表示になっているものを表示させるとか、
画面外で固定されているものを画面内で見えるように調整するとか、
スクロール時を考慮に入れるとか、
ご自身がやりたいことを、普段のサイト制作のように、該当classへCSSをあてれば良いと思います。

[石川＠Vektor,Inc.]

だいたいこんな感じだと思います。
後は…健闘を期待します！

@media ( max-width:991.99px ) {
	.site-header{
		position: fixed;
	}
	.header_scrolled.admin-bar .site-header{
		top:var(--vk-size-admin-bar);
	}
	.header_scrolled .site-header-logo {
		display: block;
	}
	.site-header + * {
		margin-top:66px !important;
	}
}

[joen1900]

関係各位
お世話になります。
ご返信ありがとうございます。
モバイルでヘッダーが固定できました。
お忙しいところ、ご回答ありがとうございました。

[投稿者]

投稿