Elementor無料版でヘッダーを作る際、テーマビルダーの代わりにUltimate Addons for Elementor（UAE）のHeader Footer Builderを使う方法があります。
ところが、UAEのNavigation Menuウィジェットでレスポンシブ時のドロップダウンを「全幅」に設定しても、Elementor V4 Flexboxで作ったヘッダーでは、画面いっぱいに広がらないケースがありました。
以前、同じ問題が起きたときは全幅表示を諦めてデザインを変更しました。今回あらためて複数のレイアウトで検証したところ、V4の構造を保ったままCSSで解決できたため、その方法と原因をまとめます。
- UAEのNavigation Menuウィジェット側では、レスポンシブメニューの「全幅」をオフにする
- ドロップダウンを
position: fixedで画面基準に配置する topをスマホ・タブレット時のヘッダー高に合わせる
今回起きた症状
今回の環境は、次のような構成です。
- Elementor無料版を使用
- UAEのHeader Footer Builderでヘッダーを作成
- Navigation Menuウィジェットを使用
- スマホ・タブレット時はハンバーガーメニューを表示
- Elementor V4 Flexboxでヘッダーを作成
Navigation Menuウィジェット側でドロップダウンを「全幅」に設定しても、V4 Flexboxではメニューが画面全幅になりませんでした。
同じNavigation MenuウィジェットをV3コンテナに配置すると、UAE側の全幅設定だけで期待どおり表示されました。つまり、メニューの設定そのものではなく、配置されているレイアウト構造によって結果が変わっていました。
「UAEはElementor V4に未対応」と断定するものではありません。この記事で紹介するのは、今回の制作環境で確認した挙動と対処法です。Elementorやプラグインのバージョン、テーマ、ヘッダー構造によって挙動が変わる可能性があります。
解決に使ったCSS
まず、UAEのNavigation Menuウィジェット側でレスポンシブ時の「全幅」をオフにします。そのうえで、次のCSSを追加します。
@media (max-width: 1024px) {
.hfe-nav-menu__layout-horizontal.hfe-dropdown {
position: fixed !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
max-width: none !important;
top: 80px !important;
transform: none !important;
}
}top: 80px;は、画面上端からドロップダウンの上端までの距離を指定し、メニューの表示位置をヘッダー下に合わせるためのものです。ヘッダーの高さによって適切な値が異なるため、必要に応じて調整してください。たとえば、スマホ・タブレット時のヘッダー高が72pxなら、top: 72px;に変更します。
Beforeと比べると、メニューの開始位置と終了位置が親コンテナではなく、画面の左右端に揃っていることが分かります。
同じページにNavigation Menuが複数ある場合は、対象のヘッダーにmhd-uae-headerなどの独自クラスを付け、適用範囲を限定すると保守しやすくなります。
@media (max-width: 1024px) {
.mhd-uae-header .hfe-nav-menu__layout-horizontal.hfe-dropdown {
position: fixed !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
max-width: none !important;
top: 80px !important;
transform: none !important;
}
}CSSを追加する場所
Elementor無料版ではウィジェットごとのカスタムCSSを使えないため、次のいずれかに追加します。
- WordPress管理画面 → 外観 → カスタマイズ → 追加CSS
- 子テーマのCSS
- CSS追加用プラグイン
まず試す場合は「追加CSS」が分かりやすいです。保存後も表示が変わらない場合は、Elementorやキャッシュ系プラグイン、ブラウザのキャッシュを確認します。
なぜwidth: 100vwだけでは直らなかったのか
最初は、次のように横幅だけを画面幅に合わせました。
width: 100vw !important;
max-width: none !important;これでメニュー自体の幅は画面幅になります。しかし、配置の基準がV4 Flexbox内のメニューウィジェットに残っていると、幅100vwのボックス全体が右へずれて表示されることがあります。
そこで、position: fixedを指定し、ドロップダウンの配置基準を親コンテナではなく画面に変更しました。
| 指定 | 役割 |
|---|---|
position: fixed |
ドロップダウンを画面基準で配置する |
left: 0 / right: 0 |
画面の左右端に合わせる |
width: 100vw |
画面幅と同じ横幅にする |
top: 80px |
画面上端ではなく、ヘッダー直下から表示する |
transform: none |
既存の位置補正が残ってずれるのを防ぐ |
途中で試したCSSと、うまくいかなかった理由
1．width: 100vwだけを指定
横幅は広がりましたが、メニューの開始位置が親要素の位置に影響されるため、画面の左右には揃いませんでした。
2．left: calc(50% - 50vw)を指定
positionが初期値のstaticのままでは、leftは効きません。position: absoluteを加えると警告は消えましたが、今回の構造では狭いメニューウィジェットが配置基準になり、右へずれました。
3．position: fixedに変更
画面を基準にしてleft: 0、right: 0を指定することで、親コンテナの幅や位置に左右されず、全幅表示できました。
なお、position: fixedだけを指定すると、UAE側のtop: 100%などが残り、メニューが画面外へ移動することがあります。そのため、今回のCSSではtopも明示しています。
V3コンテナを使う方法もある
CSSを追加せずに対応したい場合は、Navigation MenuウィジェットをV3コンテナ内に配置する方法もあります。今回の検証では、V3コンテナを挟むとUAE側の「全幅」設定が機能しました。
| 方法 | 向いているケース | 注意点 |
|---|---|---|
| V4 Flexbox＋CSS | 現在のV4構造を保ちたい | ヘッダー高に合わせてtopの調整が必要 |
| V3コンテナ＋UAEの全幅設定 | 追加CSSをなるべく使いたくない | V3とV4が混在するため、構造を把握しておく必要がある |
CSSが効かない時の確認ポイント
- UAE側の「全幅」がオフになっているか
標準の全幅指定と追加CSSが競合すると、期待どおりに配置されないことがあります。 - ブレークポイント内で確認しているか
今回のCSSは画面幅1024px以下でのみ動作します。 - セレクタが現在のHTMLに存在するか
開発者ツールで、対象のnav要素にhfe-nav-menu__layout-horizontalとhfe-dropdownが付いているか確認します。 - CSSが読み込まれているか
開発者ツールのStyles欄に追加したルール自体が表示されなければ、保存・キャッシュ・CSSの追加場所を確認します。 - キャッシュを削除したか
Elementorの「CSSとデータを再生成」を実行し、キャッシュ系プラグインやブラウザのキャッシュも削除します。 topの値が合っているか
メニューが上に重なる、または下に空く場合は、ヘッダー高と値が一致していません。
まとめ
Elementor無料版＋UAEで作ったヘッダーでは、Navigation Menuウィジェットの「全幅」設定だけでは、V4 Flexbox環境でスマホのドロップダウンが画面全幅にならない場合があります。
今回の環境では、UAE側の全幅設定をオフにし、ドロップダウンをposition: fixedで画面基準に配置することで解決しました。3つの異なるヘッダーレイアウトでも、同じ方法で表示を確認しています。
数行のCSSでも、横幅だけでなく「どの要素を基準に配置されているか」を確認することが大切です。Elementorのレイアウトが崩れたときは、見た目だけでなく構造から原因を切り分けると、再現性のある解決につながります。
Elementorのヘッダー制作を、構造から整えたい方へ
MyHeart Designでは、透明ヘッダー、スクロールで色が変わるヘッダー、メニューの挙動制御など、Elementorのヘッダー制作を短縮できるテンプレートを用意しています。
見た目だけでなく、崩れにくさ・保守しやすさ・再利用しやすさを重視した設計です。