Wbee Header Footer and Mega Menu Builder for Elementor (by Woodebee) is a focused theme-builder for site chrome. You design headers, footers, and mega-menu panels in Elementor. The plugin decides where they appear. You stay in control of layout, type, and color inside each template.

This plugin requires Elementor.

Theme Builder dashboard

Open Woodebee Header Footer in the WordPress admin.

Separate boards for Header, Footer, and Mega Menu
Create, duplicate, and delete templates
Edit with Elementor in one click
Header and footer Activate / Deactivate
Header and footer Conditions & Settings
Mega menus show Active when assigned to a menu item, Inactive when they are not

Display conditions (headers & footers)

Each header and footer can include and exclude pages. If several templates match, the most specific rule wins, then Priority.

Entire website, homepage, singular, archives, search, 404
Audience: everyone, logged in, or logged out
WooCommerce (when WooCommerce is active): shop, products, categories, cart, checkout, My account

Sticky, overlay, and responsive header

Set these on Conditions & Settings or in the header document in Elementor.

Transparent / overlay header over a hero
Sticky header with desktop, tablet, and mobile toggles
Scroll offset, optional shrink, blur, border, shadow, and scrolled colors
Optional hide-on-scroll-down (desktop)

Responsive hamburger and drawer

Header Nav is responsive by default. Below the chosen breakpoint the horizontal menu becomes a hamburger that opens a right-side drawer (off-canvas side panel).

Collapse below 1200px, 1024px (default), or 767px
Toggle icon and close icon (library or upload), plus toggle alignment
Full-height side panel with backdrop, close button, and Escape to dismiss
Style the drawer: width, padding, background, backdrop color, link colors
Preview live in Elementor by switching to tablet or mobile
A header template can also force this collapse under Conditions & Settings

When a Woodebee header or footer is active, matching theme chrome is hidden with CSS selectors from Woodebee Header Footer Settings.

Mega menus

Mega panels are normal Elementor documents. They do not use display conditions. They appear only where you attach them.

Create a mega template (blank or starter).
Design the inside in Elementor.
Go to Appearance Menus and open a top-level item.
Under Woodebee Mega Menu, choose the panel.
Set Panel width:
- Custom (default 900px, 240–1920) — centered under that item
- Full width — spans the navigation wrap
Optional badge and item icon class. Save the menu.

Parent items with a dropdown or mega show a caret. Mega content uses its own Elementor typography, padding, and line-height — not the parent nav styles. Hover stays open while you move from the item into the panel.

Starter layouts

Install from the dashboard Starter layouts row, then restyle in Elementor.

Studio header — Logo left, nav center, gold CTA. Sticky-ready.
Studio footer — Brand column, Quick Links / Work With Me / Socials Icon Lists, legal bar.
Gallery mega menu — Light featured panel, three link columns, gold CTA. Best as Custom width (~980px).

No remote images are bundled. Change copy, links, colors, and images after install.

Elementor widgets

Available in the Woodebee HF category while you edit a template.

Site Logo — custom image, Customizer logo, or site title
Header Nav — WordPress menu, mega panels, dropdowns, auto hamburger, off-canvas drawer, typography
Header CTA — gold / ink / ghost / outline button
Copyright — {year} and {site} tokens

Settings & privacy

Toggle hiding the theme header and footer
Edit the CSS selectors used to hide theme chrome
Templates and settings stay on your WordPress site

A longer walkthrough lives in docs/DOCUMENTATION.md inside the plugin folder.

Wbee Header Footer and Mega Menu Builder for Elementor

About this plugin