[ 解決済 ] スクロールした時だけグローバルナビが現れるようにしたい

[Hiroshi]

■ WordPress のバージョン
6.8.1

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

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

■ テーマのバージョン
15.29.9

■ Pro Unit のバージョン
0.29.4

■ スキンの種類
Origin III

■ プラグインの種類・バージョン
VK All in One Expansion Unit　バージョン 9.109.0.1
VK Block Patterns　バージョン 1.33.2.1
VK Blocks Pro　バージョン 1.104.0.0

■ 期待する動作
#100968　画面スクロール時に現れるグローバルメニューのみ表示したい
と、同じ内容です。

上記返信#101057
[1] ページ先頭を表示しているときはグローバルナビを表示しない。
[2] スクロールするとグローバルナビが現れる。
[3] トップページだけ [1] [2] のようにしたい。

上記1及び2の動作を希望しています。
（全てのページで同様の動作）

■ 自分で試した事
Lightning ヘッダー上部設定
　ヘッダー上部エリアを表示しないにチェック

【１】追加CSSに
＃101057の
.global-nav {
display:none;
}
を、追記
結果　変わらず。

【２】追加CSSに
＃101057の
body.home .global-nav {
display:none;
}
を追記
トップページのみヘッダーロゴ（サイトのタイトル）が表示。
非スクロール時にグローバルメニューは消えている。
トップページ以外に変化なし。
スクロール時は希望する動作。

【３】
上記【１】と合わせて、追加CSSに
#100987の
.header-top,
.site-header-logo,
.site-header-sub {
display:none;
}
を追記
全てのページでヘッダーロゴ（サイトのタイトル）が非表示。
非スクロール時にグローバルメニューが表示されている。
スクロール時は希望する動作。（ヘッダーロゴも表示される）

【４】
上記【２】と合わせて、追加CSSに
#100987の
.header-top,
.site-header-logo,
.site-header-sub {
display:none;
}
を追記
トップページで非スクロール時にヘッダーロゴ（サイトのタイトル）・グローバルメニューが非表示。
スクロール時にはヘッダーロゴ（サイトのタイトル）・グローバルメニューが表示される。
こちらは希望する動作となります。
トップページ以外は非スクロール時にヘッダーロゴ（サイトのタイトル）が非表示ですがグローバルメニューが表示されている。
スクロール時は希望する動作。

■ 症状が発生するブラウザ
Google Chrome、MS Edge

■ 実際の症状
現在上記【４】の状態。
トップページのみ希望する動作です。

追加CSSには
body.home .global-nav {
display:none;
}
.header-top,
.site-header-logo,
.site-header-sub {
display:none;
}

トップページ以外でも同様の動作となるように希望しています。

■ その他特記事項
他のプラグインや追加CSSによる干渉の可能性もあるかと思い、
新規でWordpress環境を構築してテストしてみましたが同様でした。

---

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

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

[対馬 俊彦]

こんなかんじ↓でどうでしょうか？

.header-top,
.site-header-logo,
.site-header-sub {
	display:none;
}
body:not(.header_scrolled) .global-nav {
    display: none;
}

[Hiroshi]

対馬 様

ご回答感謝いたします。
おかげさまで希望通りの動作になりました。
ありがとうございました。

[対馬 俊彦]

よく考えてみたら…

最初はサイトヘッダーが非表示で、スクロールしたら出てくる
ということなので、この↓シンプルなコードでいいですね。

body:not(.header_scrolled) #site-header {
    display: none;
}

[Hiroshi]

対馬 様

#110210のCSS一つでOKですね。
勉強になります！

ありがとうございました。

[投稿者]

投稿