【lightning】モバイルでスクロール時にヘッダーを固定する

2022.12.26

lightningでヘッダーを固定表示したい
解決策：CSSで対応

lightningでヘッダーを固定表示したい

wordpressの人気テーマ:lightningの無料版で
モバイル（スマホ）で表示した時に
ヘッダー部分（タイトルやメニュー）がスクロールすると消えてしまいます。

消えずに固定表示したい場合のCSSを紹介します。

解決策：CSSで対応

自分で追加CSSを書こうと思っていたら
本家のVectorさんのページにありましたので引用させてもらいます。

@media (max-width: 991.98px){
	.site-header {
		position:fixed !important;
		top:0px;
	}
	.header_scrolled .site-header-logo{
		display:block;
	}
	body {
		/* モバイル時のヘッダーの高さ */
		 padding-top:64px;
	}
	/* ヘッダー透過の時 */
	.site-header--trans--true+div {
		/* モバイル時のヘッダー高さ分マイナスオフセット */
		margin-top:-64px;
	}
}

こちらのcssを

外観＞カスタマイズ＞追加CSS　にコピペしていただくと
スマホで見た時に、スクロールしても
ヘッダーが固定表示されたままになります。

お試しください。