よこやま良平
WordPressのElementorで作ったヘッダーが、スマホ表示だけ急に崩れることがあります。特に多いのが、ハンバーガーメニューを開いたときに、メニューが画面いっぱいに広がらず、右端に細長いタブのように表示される不具合です。
WordPress・PHP・セキュリティ対策を中心に、20年以上Web制作と復旧対応をしている、よこやま良平です。今回は実際に対応したElementorのヘッダーメニュー崩れを、初心者にもわかるように解説します。
- Elementorのヘッダーメニューが崩れる原因
- スマホメニューが細長く表示される理由
- 追加CSSで応急修正する方法
- 再発を防ぐために確認すべき設定
この不具合は、WordPress本体が壊れたというより、Elementorのヘッダー部分・カラム幅・モバイルメニューのCSSが噛み合っていないときに起こります。
初心者の方は「メニューが壊れた」「Elementorのエラーかも」と不安になりますが、原因を分けて確認すれば落ち着いて対応できます。
こんなお悩みはありませんか？
- ある朝、サイトを開いたら真っ白画面になっていた
- 管理画面にログインできなくなって手が止まった
- 身に覚えのない記事やページが勝手に増えていた
- プラグインを更新したらサイト全体が崩れてしまった
- 以前バックアップを取ったか自分でも覚えていない
累計1,000件以上のWordPressトラブル対応の経験から、「壊れる前に備える」ためのチェックリストを1冊にまとめました。
ログイン・本体・バックアップ・サーバー・運用の5分野を、50項目で「危険度・確認方法・対処法」まで解説しています。
セキュリティプラグイン・WordPressの教科書も含めた3大特典を、
今なら無料で受け取れます。
目次
Elementorヘッダー崩れはCSS幅の指定ミスで起きやすい
結論から言うと、今回のようなElementorヘッダー崩れは、モバイルメニューの表示幅が画面幅ではなく、親カラムの幅に引っ張られていることが原因になりやすいです。
Elementorでは、ヘッダー内にロゴ用カラムとメニュー用カラムを分けて作ることがよくあります。スマホ表示では、メニューアイコンが右側の小さなカラム内に配置されます。
この状態でドロップダウンメニューも同じ小さなカラム幅を基準に表示されると、メニュー全体が画面いっぱいに広がらず、右端に細い帯のように出てしまいます。
スマホ表示でハンバーガーメニューを開くと、本来は横幅いっぱいに出るはずのメニューが、右端に細長いタブのように表示されていました。HTML上ではメニューは存在しており、CSSの表示幅だけがずれている状態でした。
Elementorヘッダーメニュー崩れの確認ポイント
最初に確認すべきなのは、WordPress管理画面ではなく、公開ページで実際にどのように崩れているかです。
スマホ表示だけ崩れるか確認する
パソコン表示では問題なく、スマホ表示だけメニューが崩れる場合は、モバイル用CSSやレスポンシブ設定が原因である可能性が高いです。
Chromeの検証ツールやスマホ実機で、ハンバーガーメニューを開いたときの幅を確認します。
メニューが存在しているか確認する
メニュー項目がまったく表示されない場合と、細く表示される場合では原因が違います。今回のように細く表示される場合は、メニュー自体は読み込まれているが、表示幅が間違っている状態です。
つまり、WordPressメニュー設定やリンク切れではなく、CSSで直せる可能性が高いということです。
原因がCSSなのに、Elementor・テーマ・プラグインを一気に更新すると、別の不具合が起きることがあります。まずはバックアップを取り、症状を切り分けてから対応しましょう。
Elementorヘッダー崩れを追加CSSで修正する方法
応急修正としては、モバイルメニューを画面幅いっぱいに固定表示するCSSを追加する方法が有効です。
今回のケースでは、該当するElementorメニューのクラスに対して、
スマホ時だけ幅を100vwに指定しました。
Elementor CSS設定例
@media (max-width: 767px) {
.elementor-element-aa1fc29 .elementor-nav-menu--dropdown.elementor-nav-menu__container {
position: fixed !important;
top: 70px !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
margin-top: 0 !important;
z-index: 99999 !important;
}
.elementor-element-aa1fc29 .elementor-nav-menu--dropdown a {
white-space: normal !important;
justify-content: center !important;
text-align: center !important;
}
}このCSSは、すべてのサイトにそのまま使えるわけではありません。
elementor-element-aa1fc29 の部分は、
サイトごとに違うElementorの要素IDになります。
初心者の方が対応する場合は、外観の「追加CSS」に入れる前に、
必ず元のCSSをメモしておきましょう。
- 外観 → カスタマイズ → 追加CSS
- Elementor → サイト設定 → カスタムCSS
- 該当ヘッダーテンプレートのカスタムCSS
Elementorヘッダー崩れを直す前にバックアップを取る
CSSだけの修正でも、作業前のバックアップは必須です。特にElementorのヘッダーはサイト全体に表示されるため、失敗すると全ページのメニューに影響します。
追加CSSだけなら復元しやすい
追加CSSに書いた内容は、削除すれば元に戻せます。そのため、テーマファイルを直接編集するより安全です。
ただし、複数人で管理しているサイトでは、誰がどこにCSSを追加したのかわからなくなることがあります。作業日と内容をメモしておくと安心です。
更新直後ならキャッシュも確認する
CSSを入れても表示が変わらない場合、キャッシュが残っていることがあります。ブラウザキャッシュ、キャッシュ系プラグイン、サーバーキャッシュを順番に確認しましょう。
スマホ実機で確認するときは、シークレットモードや別ブラウザで見ると、キャッシュの影響を避けやすくなります。
Elementorヘッダー崩れを再発させないための考え方
再発を防ぐには、CSSだけでなく、Elementorのレイアウト設計も見直すことが大切です。
ヘッダーのロゴとメニューを横並びにするとき、スマホ表示で各カラムがどの幅になるかを意識して作る必要があります。
- スマホ表示でロゴ用カラムとメニュー用カラムの幅を確認する
- ドロップダウンメニューが親カラム幅に制限されていないか確認する
- Elementor・Elementor Pro・テーマ更新後にスマホメニューを確認する
- 追加CSSを入れた場合は、どこに何を入れたか記録する
Elementorヘッダー崩れでよくある質問
多くの場合、モバイルメニューの幅が画面幅ではなく、親カラムの幅に制限されていることが原因です。CSSやレスポンシブ設定を確認します。
応急修正としては有効です。ただし、サイトごとにElementorの要素IDが違うため、CSSをそのままコピーするのではなく、対象のメニューを確認してから適用してください。
更新で直る場合もありますが、逆に別の表示崩れが起きることもあります。先にバックアップを取り、現在の崩れ方を確認してから更新するのが安全です。
Elementorヘッダー崩れの直し方まとめ
Elementorのヘッダーメニューがスマホで細長く表示される場合、メニューそのものが壊れているのではなく、CSSの幅指定が原因になっていることが多いです。
まずは、スマホ表示でメニューが存在しているか、ドロップダウンの幅がどこに制限されているかを確認しましょう。そのうえで追加CSSを使えば、短時間で修正できるケースがあります。
- スマホだけ崩れる場合はレスポンシブCSSを疑う
- メニューが細長く出る場合は幅指定の問題が多い
- 追加CSSで画面幅いっぱいに表示できることがある
- 作業前には必ずバックアップとメモを残す
Elementorヘッダー崩れやWordPressトラブルが自分で直せない時は
ワードプレスのWordPressエラートラブル解決をしたいなら
クイックレスキューが解決します。
・WordPressが真っ白画面
・WordPressがログインできない
・ホームページのマルウェアや乗っ取り
・サイトの表示くずれ
・エラーが表示されている
これらでお悩みなら最短30分ですぐに解決します！