Header Block
A full site header and navigation block that reads directly from your WordPress nav menus. Includes logo, nav links, dropdowns, CTA button, mobile menu, and scroll effects — all rendered dynamically by PHP.
HEADER PREVIEW
Home
About
Services
Blog
Contact
Dynamic block
Dynamic block — rendered by PHP on each page load from your WordPress menu. No saved HTML. The block uses render.php and has no save.js. Menu changes in WordPress are reflected instantly without re-saving the page.
When to use this block
- Main site header with navigation menus
- Fixed/sticky headers with scroll effects (blur, border)
- Headers with a CTA button for conversions
- Responsive navigation with mobile menu support
Menu & Logo
Select which WordPress nav menu to render and upload your site logo with responsive sizing controls.
Menu & Logo
Sidebar Panel
Menu
Logo URL
Max Width
px
Max Height
px
RESPONSIVE LOGO SIZING
Mobile
100px × 32px
Tablet
120px × 36px
Desktop
140px × 40px
Logo max-width and max-height are responsive across breakpoints.
Header Style
Background color with opacity, fixed positioning, scroll effects, max-width, and responsive header height.
Header Style
Sidebar Panel
Background
Opacity
%
Fixed Position
Blur on Scroll
Border on Scroll
Max Width
px
Height
px
SCROLL EFFECTS
Blur on scroll
Applies backdrop-filter: blur() when the user scrolls past the header, creating a frosted-glass effect.
Border on scroll
Shows a subtle bottom border when scrolled, giving the header a clear separation from page content.
Height is responsive: Mobile Tablet Desktop
Nav Links
Typography controls for the top-level navigation links — all responsive across breakpoints.
Nav Typography
Sidebar Panel
Font Size
px
Font Weight
Line Height
px
Gap
px
Link Color
#3D3D3D
Hover Color
#171717
NAV LINK PREVIEW
Home
About
Services
Blog
Font size, weight, gap, and colors are all responsive across breakpoints.
Dropdown
Style the dropdown menus for sub-navigation items. Supports mega-menu columns for complex navigation.
Dropdown Styling
Sidebar Panel
Background
#FFFFFF
Border Radius
px
Font Size
px
Font Weight
Gap
px
Link Color
#525252
Hover Color
#171717
DROPDOWN PREVIEW
Web Design
Development
SEO Services
Consulting
Supports mega-menu columns for complex multi-column dropdown layouts.
CTA Button
An optional call-to-action button in the header. Toggle it on/off and customize text, URL, colors, radius, and padding — all responsive.
CTA Button
Sidebar Panel
Show CTA
Text
Get Started
URL
/contact
Background
#171717
Text Color
#FFFFFF
Border Radius
px
Padding
10 20
CTA BUTTON PREVIEW
Colors, radius, and padding are fully responsive across breakpoints.
Toggle off to hide the CTA button entirely from the header.
Mobile Menu
Style the mobile navigation overlay — background, link colors, border, and padding.
Mobile Menu
Sidebar Panel
Background
#FFFFFF
Link Color
#171717
Border
#E4E4E4
Padding
16 24
MOBILE MENU PREVIEW
Home
About
Services
Blog
All Available Controls
Menu & Logo Menu selector, logo URL/sizing
menuId: WordPress nav menu ID (number). logoUrl: image URL string. logoMaxWidth (+Md/Lg), logoMaxHeight (+Md/Lg): px values, responsive.
Header Style Background, opacity, positioning, height
headerBg: hex color. headerBgOpacity: 0–100 (number). fixedPosition: boolean. maxWidth: px value. headerHeight, headerHeightMd, headerHeightLg: px values (responsive).
Scroll Effects Blur & border on scroll
scrollBlur: boolean — enables backdrop-filter: blur() on scroll. scrollBorderColor/scrollBorderWidth (default 1): shows a bottom border when scrolled. Both are JavaScript-driven, toggling the is-scrolled class on the header element — not present in the initial server-rendered HTML.
Nav Typography Font size, weight, gap, color — responsive
navFontSize, navFontSizeMd, navFontSizeLg: px. navFontWeight: 300–900. navLineHeight, navLineHeightMd, navLineHeightLg: px. navGap, navGapMd, navGapLg: px. navLinkColor, navLinkHoverColor: hex.
Dropdown Styling Background, radius, font, colors
dropdownBg: hex. dropdownRadius: px. dropdownFontSize: px. dropdownFontWeight: 300–900. dropdownGap: px. dropdownLinkColor, dropdownLinkHoverColor: hex. megaMenuColumns: number of columns for mega-menu layouts.
CTA Button Toggle, text, URL, colors, radius, padding
showCta: boolean toggle. ctaText: string. ctaUrl: URL string. ctaBg, ctaTextColor: hex. ctaRadius: px. ctaPadding, ctaPaddingMd, ctaPaddingLg: responsive shorthand values.
Mobile Menu Background, link color, border, padding
mobileBg: hex. mobileLinkColor: hex. mobileBorder: hex color for divider lines between links. mobilePadding: shorthand px value for internal spacing.