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

モバイルナビ固定

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 にコピペしていただくと
スマホで見た時に、スクロールしても
ヘッダーが固定表示されたままになります。

お試しください。

Vectorさんからの参考ページはこちら

https://vws.vektor-inc.co.jp/forums/topic/mobile-header-logo-fix
ワードプレス関連
wordpress に関係する問題、解決、CSS、wordpressテーマ、プラグイン、データベースなどなど。 図解で実際の問題発生エラー事項と解決策をご紹介します。 無料テーマlightningやCocoonなどの使い方も♪
Amazon プライム対象
タイトルとURLをコピーしました