Elementorのヘッダーメニューで、こんな状態になっていませんか？
- スクロール中に複数のメニュー項目が同時に色変わりしている
- 今どこを見ているのか、メニューで分からない
- セクションをまたぐたびに、色の切り替わりがおかしい
本来であれば「今見ているセクション」に対応するメニューだけが色変わりするのが理想です。
この記事では、この問題がなぜ起きるのか、そして安定して解決する方法を解説します。
この問題が起きやすいページの特徴
Elementorでメニューの色変わりがおかしくなりやすいのは、次のようなページです。
- セクション同士の間隔が近いLP
- 固定ヘッダーを使っているページ
- アンカーリンクでページ内移動しているページ
- 見出しが連続している構造
特にLPは、複数のセクションが密集しているため、この問題が起きやすい環境です。
なぜ複数の項目が色変わりするのか
原因はシンプルです。スクロール位置の判定が曖昧になるからです。
- セクション間の距離が近い
- 固定ヘッダーで表示位置がズレている
このような状態だと、「どのセクションを今見ているか」の判定が重なってしまいます。
結果として、複数のメニュー項目が同時に色変わりして見える状態が生まれます。
実は「2種類の問題」が混在しています
メニューが複数色変わりする問題には、2つのパターンがあります。混同すると、対処法を間違えます。
① 見た目の問題（比較的軽い）
- hoverと選択中のスタイルが重なっている
- 下線や色が崩れている
→ CSSで解決できます
② 挙動の問題（本質的な問題）
- 複数の項目が同時に色変わりする
- スクロールしても切り替わらない
- 現在地が正確に表示されない
→ CSSでは安定して解決できません
ポイント
この記事で扱うのは②の挙動の問題です。見た目の調整だけでは、根本的には解決しません。
よく紹介される対処法と、その限界
「Elementor ヘッダー メニュー 複数 色が変わる」で調べると、こういった方法が出てきます。
- セクションの余白を広げる
- 選択中のデザインを目立たなくする
- ヘッダーの高さを調整する
- アンカー位置をずらす（
scroll-margin-top: 80px;など）
これらは有効な場面もあります。しかし、本質的な問題には届きません。
| 対処法 | できること | できないこと |
|---|---|---|
| 余白・位置調整 | ズレを緩和する | 色変わりの判定を制御する |
| CSS調整 | 見た目を整える | スクロール連動を作る |
つまり、「どこを見ているか」をきちんと判定するしくみがないと、根本的には解決しません。
CSSだけでは解決しにくい理由
CSSは「見た目を整える」ためのものです。
- 位置のズレを補正する → CSSで対応可能
- デザインの崩れを直す → CSSで対応可能
しかし今回必要なのは、「色変わりする項目を1つに絞り、スクロールに応じて正確に切り替える」ことです。
これは状態管理、つまりJSの領域です。CSSでは担えません。
解決方法：スクロール位置をJSで判定する
スクロール位置をJavaScriptで正確に判定することで、次の状態を実現できます。
- 現在地のセクションを正確に特定する
- 色変わりするメニュー項目は常に1つだけ
- LPのような密集した構造でも安定して動く
メニューActive表示制御テンプレ
複数の色変わりを防止し、スクロールに応じて現在地を1つだけ正確に表示します。
Elementorで動作確認済み・プラグイン不要のテンプレートです。
よくある別の問題にも対応できます
メニューの色変わりが解決したあとに「あれ、まだ何かおかしい」となるケースがあります。
問題の種類ごとに対応が分かれます。
見出しがヘッダーに隠れる場合
固定ヘッダーがあると、アンカーリンクで移動したときに見出しが隠れることがあります。
これは位置ズレの問題なので、アンカー位置補正で解決できます。
メニューのデザインだけがおかしい場合
色や下線が意図した通りにならないのは、マウスオーバー時と選択中のスタイルが競合しているケースです。
これは見た目の問題なので、CSSで対応できます。
どれを使えばいいか、一覧でわかります
| 症状 | 対応テンプレ |
|---|---|
| 複数の項目が色変わりする・切り替わらない | Active制御テンプレ（今回の主役） |
| 見出しがヘッダーに隠れる | アンカーずれ防止CSS |
| 色・下線などデザインが崩れる | メニュー挙動制御CSS |
おすすめの組み合わせ
より完全な状態にしたい場合は、Active制御テンプレ + アンカーずれ防止CSSの組み合わせがおすすめです。
まとめ
Elementorのヘッダーメニューで複数の項目が色変わりする問題は、CSSを調整しても安定しません。
原因は「見た目」ではなく、スクロール位置の判定ロジックにあるからです。
| 問題の種類 | 解決手段 |
|---|---|
| 見た目の崩れ | CSS |
| アンカー位置のズレ | offset補正 |
| 色変わりの判定・切り替え | JS（今回のテンプレ） |
問題を種類ごとに分けて考えることで、正確に、確実に解決できます。