[ 解決済 ] スマホ時のヘッダー固定時のロゴ表示について

[traveller]

■WordPress：5.8.1
■Lightning: 14.10.0
■Lightning G3 Pro Unit： 0.9.5

スマホでアクセスした際、ハンバーガーメニューはスクロールしても追従（固定？）し表示されますが、ロゴは消えます。
ロゴとハンバーガーメニューはスクロールしても固定表示されるようにできないでしょうか？

PC表示だと、その設定があるようです。

Lightningのカスタマイズ画面を見ているのですが、それらしき設定がなく、これはどうしても必要です。
これができないという事はなく、私が見落としているのかと思うんですが、教えてください。

よろしくお願いいたします。

[石川＠Vektor,Inc.]

> これができないという事はなく、

スマートフォンなどモバイル端末において、限られた画面サイズ内でいつまでもロゴが一定領域占有しつづけるのは閲覧の邪魔になるという意図でのLightning G3版での仕様となります。

モバイルでロゴを固定していないサイト例
https://toyota.jp/
https://www.sony.co.jp/

現状では固定させる場合は独自にCSSでカスタマイズする必要があります。

できる！CSSカスタマイズ

[traveller]

石川＠Vektor,Inc.　様

ご回答、ありがとうございます。

プロの方に対し、素人考えで恐縮なのですが、ロゴ表示については、アクセスした方の視認性による効果を多少なりとも重要視していいます。
スマホでアクセスした際に、ロゴ（会社名など）が固定され表示されていますと、常に会社名が表示されますので、会社名自体を覚えていただきやすくなります。
至極、単純ですが、これはかなり重要なことだと考えています。

ただ、今回のことで、私は考えが古いんだな・・と思い、メニューだけの仕様というのが一般的なのかなと、下記、制作事例のページ（https://sankoudesign.com/）に掲載されているサイトを、スマホで見ていったのですが、ロゴを含むヘッダー固定スクロール仕様のサイトが、90サイト中80サイトほどはあるので、まだ、需要はあるのかな・・とは思いました。

また、個人的なことになりますが、私がLightningを紹介している方が仕業関係が多いこともあり、ほとんど、ヘッダー固定でスクロール時、ロゴ表示まで求められますので、今後のこともあり、ご確認させていただきました。
独自でカスタマイズするよりも、Lightningの機能として正式に提供されている方が、後々安心感がありますし・・。

これが今後の主流になっていくのか私自身分らないのですが、需要として、この機能がプラスになってもマイナスになることは無いように思えますが、ヘッダー固定スクロール時のロゴ表示がないのは、とても不思議ではあります。

すみません。
ちなみに下記のリンクは、結果　4 質問のうち3が正解。とうことでした。

できる！CSSカスタマイズ

この機能が無い（外された？）というのは、とても残念でした。

[石川＠Vektor,Inc.]

ご意見ありがとうございます。
他の実装予定作業などが多いためすぐには実装できませんが、今後の検討課題とさせていただきます。

[石川＠Vektor,Inc.]

https://github.com/vektor-inc/lightning/issues/736

[traveller]

ご返信ありがとうございます。

> 他の実装予定作業などが多いためすぐには実装できませんが、今後の検討課題とさせていただきます。

ありがとうございます。
ご紹介した方の数名だったら気にしていなかったのですが、思っていたよりも多くいただく意見だったので、やもうえず、ご質問させていただきました。

現在、Lightningをご紹介させていただいていた仕業の方は、今回の要望について必須事項となるため、他テーマを購入してもらうと思いますが、基本はLightningを紹介させていただければと思います。

まずは、お忙しいところ、ご回答ありがとうございました。

[石川＠Vektor,Inc.]

下記 外観 > カスタマイズ > 追加CSSなどに記載いただけば固定されますのでお試しください。

@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;
	}
}

[traveller]

ご回答いただいておりまして、ご返信遅くなりましてすみません。
イメージ通りのことができました。
ありがとうございます。

[traveller]

ヘッダーの高さ調整をオフにしたく、下記を参考にしてみたら、高さ調整がOFFになっているようですが、G3でも有効なのでしょうか。

ヘッダーの固定・高さ自動調整機能をオフにする

add_filter( 'lightning_header_height_changer_enable', 'lightning_header_height_changer_disabel');
function lightning_header_height_changer_disabel(){
    return false;
}

もし、お時間がございましたら、ご回答お願いします。

[石川＠Vektor,Inc.]

高さの可変調整は G1 時代の機能で G3 では無効になっています。

[traveller]

ご回答ありがとうございます。

記載させていただいた内容をfunctions.phpに記入しましたら、ヘッダーの高さが一定になった気がしたのですが、現状、固定されたのでよかったです。

お手間を取らせてすみません。

[投稿者]

投稿