/
/
Advanced Header Block
Advanced Header Block
Full mega-menu header with nested dropdown panels, featured content areas, custom icons, and a CTA button. Supports sticky mode, responsive typography at three levels, and column dividers. Uses Advanced Header Featured Block children to map rich content into menu items.
MEGA-MENU HEADER
Products
Solutions
Resources
Pricing
PLATFORM
Analytics
Automation
Integrations
DEVELOPERS
API Docs
SDKs
Changelog
COMPANY
About
Careers
Contact
FEATURED
New Release
Check out what’s new
Dynamic block
This block uses render.php for server-side rendering. The save() function returns InnerBlocks.Content (hybrid save) so featured block children are serialised into the block comment. At render time, render.php reads inner blocks, maps featured content to the corresponding menu items, and builds the full header markup live.
When to use this block
- Marketing sites needing mega-menu dropdowns with columns and featured content
- Headers that require sticky behaviour with a different background color
- Navigation with a prominent call-to-action button
- Fully custom mobile icons (hamburger, close, back arrow)
Menu & Logo
Select a WordPress menu by ID and configure the site logo with maximum dimensions.
Menu & Logo
Sidebar Panel
Menu ID
Logo URL
Logo Max Width
px
Logo Max Height
px
Max Width
px
Header Height
px
HOW IT WORKS
- menuId — The WordPress nav menu ID. render.php uses this to fetch menu items and build the dropdown tree.
- Logo — URL to the logo image, constrained by maxWidth and maxHeight.
- Header Height — Responsive across 3 breakpoints. Controls the overall header bar height.
Header Height is responsive: Mobile Tablet Desktop
Background & Sticky
Three background colors and a sticky toggle that pins the header on scroll with its own background.
Background & Sticky
Sidebar Panel
Sticky
Header Background
#FFFFFF
Sticky Background
#FFFFFF
Dropdown Background
#FFFFFF
COLOR APPLICATION
Header BG
Default header bar
Sticky BG
Applied when scrolled & sticky
Dropdown BG
Mega-menu panel background
Navigation Typography
Three independent typography levels: top-level nav links, mega-menu headings, and child links. Each is fully responsive.
Nav Links
Level 1
Font Size
px
Weight
Line Height
Letter Spacing
px
Color
Hover
Menu Headings
Level 2
Font Size
px
Weight
Line Height
Letter Spacing
px
Color
Child Links
Level 3
Font Size
px
Weight
Line Height
Letter Spacing
px
Color
Hover
All three levels are responsive: Mobile Tablet Desktop — Column divider: dividerWidth + dividerColor between dropdown columns.
CTA Button
Optional call-to-action button in the header bar with full color, border, radius, and padding control.
CTA Button
Sidebar Panel
Show CTA
Text
URL
Background
Text Color
Hover BG
Hover Text
Border
px
Radius
px
Padding
CTA PREVIEW
Default state
Hover state
Border, radius, and padding are responsive across 3 breakpoints.
Responsive controls: Mobile Tablet Desktop
Custom Icons
Four icon slots for mobile navigation. Each accepts a custom image URL with independent width and height.
Icons
Sidebar Panel
Hamburger
Close
Arrow
Back
ICON SLOTS
Hamburger
Close
Arrow
Back
Each icon has independent url, width, and height controls. Use SVG or PNG images.
Featured Content
The Advanced Header Featured Block is the only allowed child block. It associates rich content (images, text, links) with specific menu items in the mega-menu dropdown.
HOW FEATURED CONTENT WORKS
- 1. Add
advanced-header-featured-blockchildren inside this block in the editor. - 2. Each featured block targets a specific menu item.
- 3. At render, render.php reads InnerBlocks and maps each featured block to its menu item’s dropdown panel.
- 4. The featured area appears beside the link columns in the mega-menu.
Hybrid save pattern
Unlike most dynamic blocks that return null from save(), this block returns InnerBlocks.Content. This serialises the featured block children into the post content so render.php can access them server-side when building the header.
All Available Controls
Menu & Logo menuId, logo url/maxWidth/maxHeight, maxWidth, headerHeight
menuId: WordPress menu ID. logoUrl: image URL. logoMaxWidth/logoMaxHeight: px. maxWidth: header container max-width, 16-value list. headerHeight (+Md/Lg): responsive header bar height.
Background & Sticky Header, sticky, dropdown backgrounds + sticky toggle
sticky: boolean toggle. headerBgColor: default background. stickyBgColor: background when scrolled and sticky. dropdownBgColor: mega-menu panel background.
Nav Link Typography Font size, weight, line height, letter spacing, color, hover — 3 breakpoints
navFontSize/navFontWeight/navLineHeight/navLetterSpacing (+Md/Lg). navColor: default color. navHoverColor: hover state. Applied to top-level navigation links.
Heading & Child Typography Mega-menu headings + child link styles, 3 breakpoints each
Headings: headingFontSize/headingFontWeight/headingLineHeight/headingLetterSpacing (+Md/Lg) + headingColor.
Child links: childFontSize/childFontWeight/childLineHeight/childLetterSpacing (+Md/Lg) + childColor/childHoverColor.
Divider: dividerWidth (px) + dividerColor between mega-menu columns.
CTA Button Toggle, text, url, colors, hover, border, radius, padding
ctaEnabled: toggle. ctaText/ctaUrl: label and link. ctaBgColor/ctaTextColor/ctaHoverBgColor/ctaHoverTextColor: colors. ctaBorder (+Md/Lg): border width. ctaRadius (+Md/Lg): border radius. ctaPaddingTop/Right/Bottom/Left (+Md/Lg): responsive padding.
Custom Icons Hamburger, close, arrow, back — url/width/height each
hamburgerIconUrl/hamburgerIconWidth/hamburgerIconHeight. closeIconUrl/closeIconWidth/closeIconHeight. arrowIconUrl/arrowIconWidth/arrowIconHeight. backIconUrl/backIconWidth/backIconHeight.
Spacing & Padding Mobile item padding, child/heading padding
mobileItemPadding: padding for mobile menu items. childPaddingTop/Right/Bottom/Left: inner padding on child links. headingPaddingTop/Right/Bottom/Left: inner padding on mega-menu heading items.