Description
Header Footer & Mega Menu Builder for Elementor is the all-in-one header footer builder and mega menu builder solution for building professional headers, footers, and mega menus directly inside Elementor — without writing a single line of code.
Whether you are building a business website, WooCommerce store, blog, or portfolio, this Header Footer Builder for Elementor plugin gives you full design control over every part of your site’s navigation and layout.
Why Choose the Header Footer Builder and Mega Menu Builder for Elementor?
Most WordPress websites need a custom Elementor header, a matching Elementor footer, and a flexible mega menu with sticky effects and transparent header options — but managing these separate plugins creates bloat, conflicts, and extra maintenance. This plugin solves that by combining all features into one lightweight, focused tool.
- Custom Elementor Header Builder — Design any header layout with Elementor’s drag-and-drop editor
- Custom Elementor Footer Builder — Build footers with full widget support and conditional display
- Mega Menu Builder — Create multi-column dropdown and mega menu layouts inside Elementor
- Sticky Header — Keep your header fixed at the top as visitors scroll down
- Transparent Header — Keep your header transparent at the top while visitors scroll down with the option to apply background color
- Scroll Animation Effects — Add smooth header transition effects on scroll
- Smart Display Conditions — Assign different headers and footers to different pages, posts, and post types
Custom Header Footer Builder for Elementor
- Create unlimited Elementor header templates
- Set headers globally across the entire site
- Assign page-specific headers using display conditions
- Exclude the header from specific pages
- Enable sticky header behavior — header stays visible while scrolling
- Add scroll animation effects for a polished header transition
- Edit display conditions directly from the template list
Custom Footer Builder for Elementor
- Build custom Elementor footer templates with full widget support
- Set site-wide or page-specific footer conditions
- Assign footers to specific post types, archive pages, or WooCommerce pages
- Exclude the footer from any page
- Manage all footer templates from the WordPress dashboard
Mega Menu Builder and Navigation Features
- Mega Menu Builder Widget — Build advanced mega menu layouts directly inside Elementor with multi-column dropdown menus without extra plugins
- Add fully customizable responsive navigation menu widgets with flexible styling options
- Design responsive navigation menus that work perfectly on all devices
- Full typography, color, spacing, and hover controls
Sticky Header and Scroll Effects
- Enable sticky header so it stays visible at all times
- Smooth scroll animation keeps the header transition polished
- Improves user experience on long-scrolling pages
- Works independently — enable sticky without animation or vice versa
Smart Display Conditions
- Entire site — apply a header or footer globally
- All blog posts — target the full post archive
- All archive pages — category, tag, and taxonomy archives
- All WooCommerce products — requires WooCommerce active
- All WooCommerce pages — cart, checkout, shop, and account pages
- Specific pages — include or exclude individual pages
Included Elementor Widgets
- Navigation Menu Widget — Fully customizable responsive menu with dropdown support
- Mega Menu Widget — Fully customizable responsive mega menu with dropdown support
- Site Logo Widget — Display your site logo with responsive size controls
- Icon Button Widget — Create modern icon-based call to action buttons
- Top Bar Widget — Add contact info, social icons, or announcements above the header
- Copyright Widget — Add dynamic copyright text with auto year in the footer
Who This Plugin Is For
- WordPress Developers/Customizers who want to build professional websites faster.
- Freelancers and agencies building client websites in Elementor
- WooCommerce store owners who need a custom header and footer
- Bloggers who want sticky header behavior without a page builder theme
- Developers who want a clean, maintainable solution for navigation design
- Anyone who wants to replace multiple plugins with one focused tool
Benefits of Using This Header Footer Builder
- One header footer builder and mega menu builder replaces multiple header, footer, and mega menu tools
- Faster setup — no theme files to edit, no coding required
- Works with Elementor Free and Elementor Pro
- Compatible with all major WordPress themes including Astra and OceanWP
- Semantic HTML output for better SEO and accessibility
- Lightweight — only loads assets where needed
How to Use the Header Footer Builder for Elementor
- Upload the plugin folder to the
/wp-content/plugins/directory. - Activate the plugin through the Plugins menu in WordPress.
- Go to the plugin dashboard in the WordPress admin.
- Click Add New Header Template or Add New Footer Template.
- Set your display conditions and click Create.
- Design your header or footer inside Elementor and publish.
License
Header Footer & Mega Menu Builder for Elementor is licensed under the GNU General Public License v2 or later (https://www.gnu.org/licenses/gpl-3.0.html).
Credits
Developed by Coder Creation.
Screenshots
FAQ
No. This plugin works with both the free version of Elementor and Elementor Pro.
Can I use a different header on different pages?
Yes. You can create multiple header templates and assign each one using display conditions — by page, post type, archive, or WooCommerce section.
How do I make a sticky header with this plugin?
Use the header footer builder to create your header template, then enable the “Sticky Header” toggle in the template settings. Your header will stay fixed at the top while visitors scroll.
Does the sticky header work without scroll animation?
Yes. Sticky header and scroll animation are independent features. You can enable either one or both together.
Yes. You can create mega menus for desktop using the mega menu widgets, then use the navigation menu for responsive devices. The plugin includes both a navigation menu widget and mega menu layout tools built directly inside Elementor for flexible menu design.
Yes. The mega menu builder widget lets you create multi-column dropdown layouts. Use the display conditions to show different menus on different pages or post types.
Does this plugin work with WooCommerce?
Yes. You can assign specific headers and footers to WooCommerce product pages, shop pages, cart, and checkout pages using the header footer builder’s smart conditions.
Will this plugin slow down my website?
No. The header footer builder uses conditional asset loading — CSS and JavaScript are only loaded on pages where the plugin is active.
Which themes is this plugin compatible with?
The Header Footer Builder for Elementor works with all standard WordPress themes including Astra, OceanWP, Hello Elementor, GeneratePress, and others.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Header Footer & Mega Menu Builder for Elementor” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Header Footer & Mega Menu Builder for Elementor” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.1.1
- Fixed: Plugin documentation now includes answers to common questions about sticky headers and mega menu setup
- Improved: Expanded FAQ section with clearer instructions for building responsive headers and footers
- Added: Enhanced plugin description with better feature explanations for new users
1.1.0
- Fixed: Elementor inline CSS output now uses wp_add_inline_style() instead of direct echo — resolves WP.org escaping requirement
- Fixed: Mobile mega menu now displays correctly using position:fixed to bypass parent overflow:hidden
- Fixed: Mega menu responsive breakpoint now detected via JavaScript so Elementor editor preview also switches correctly
- Fixed: Mobile menu items with assigned mega menu templates now show expand arrow and accordion behavior
- Fixed: Mobile Walker depth increased to 3 so sub-menu items render in the accordion
- Fixed: Admin menu position moved from 21 to 58 to avoid competing with core WordPress items
- Fixed: Hardcoded placeholder text and modal labels wrapped with esc_attr_e() and esc_html_e()
- Fixed: Broken defined() check on class constant replaced with class_exists() in upgrade routine
- Fixed: ABSPATH check moved before use statements in mega-menu widget
- Fixed: Null-check added for get_current_screen() in admin footer callback
- Added: Mobile menu style controls — background, shadow, border, radius, padding, max-height, item tabs
- Added: Mega menu desktop item normal/hover tab controls for background color
- Added: Mega menu panel responsive padding control
1.0.0
- Initial release
- Elementor header template builder with display conditions
- Elementor footer template builder with display conditions
- Sticky header support
- Scroll animation effect for headers
- Mega menu and navigation menu widget
- Site Logo, Top Bar, Icon Button, and Copyright widgets
- WordPress admin dashboard for template management