Description
Header Footer & Mega Menu Builder for Elementor is the all-in-one 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 plugin gives you full design control over every part of your site’s navigation and layout.
Why Choose Header Footer & Mega Menu Builder for Elementor?
Most WordPress websites need a custom Elementor header, a matching Elementor footer, and a flexible mega menu — but managing three separate plugins creates bloat, conflicts, and extra maintenance. This plugin solves that by combining all three 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
- 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
Header Builder Features
- 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
Elementor Footer Builder Features
- 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 and Navigation Features
- Build advanced mega menu layouts directly inside Elementor
- Create multi-column dropdown menus without extra plugins
- Add navigation menu widgets with flexible styling options
- Design responsive navigation menus that work 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
- 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
- One plugin 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
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.
Installation
- 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.
FAQ
-
Do I need Elementor Pro to use this plugin?
-
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.
-
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. Currently you can make mega menu for desktop version using mega menu widgets. And make it hide for below the desktop devices and use normal navigation for responsive. The plugin includes a navigation menu widget and mega menu layout tools built directly inside Elementor.
-
Does this plugin work with WooCommerce?
-
Yes. You can assign specific headers and footers to WooCommerce product pages, shop pages, cart, and checkout pages.
-
Will this plugin slow down my website?
-
No. The plugin 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 plugin works with all standard WordPress themes including Astra, OceanWP, Hello Elementor, GeneratePress, and others.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“CC Header, Footer & Mega Menu Builder for Elementor” is open source software. The following people have contributed to this plugin.
Contributors
Translate “CC 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.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