Simple Header Block
A simplified flat navigation header — logo, nav links, and an optional CTA button. No dropdowns or mega-menu. Best for most sites.
SIMPLE HEADER
Home
Features
Pricing
Blog
Dynamic block
This block uses render.php on the server (no save.js). The navigation menu is fetched from WordPress at render time using the selected menuId.
When to use this block
- Standard site header with flat navigation links
- Sites that don’t need dropdown or mega-menu navigation
- Landing pages, portfolios, blogs, and marketing sites
- Headers with scroll-aware background transitions
Menu & Logo
Select a WordPress navigation menu and upload a logo with responsive max-width and max-height controls.
Menu & Logo
Sidebar Panel
Navigation Menu
Logo
Max Width
px
Max Height
px
RESPONSIVE LOGO SIZING
Mobile
100px × 32px
Tablet
120px × 36px
Desktop
140px × 40px
Logo max-width and max-height can be set per breakpoint.
Background & Scroll
Two background states: the initial appearance and the post-scroll appearance. When the user scrolls, the is-scrolled class is added and the second set of values takes over.
Initial Background
Pre-scroll
Background Color
Opacity
%
Scroll Background
Post-scroll (is-scrolled)
Scroll Bg Color
Scroll Opacity
Scroll Blur
Blur Amount
px
Position
Fixed / Sticky
Header Height
Responsive
Height
px
SCROLL TRANSITION
Home About Blog
Pre-scroll
Home About Blog
Post-scroll
The is-scrolled class is toggled via JavaScript when the page scrolls past a threshold.
Nav Links
Typography and spacing for the flat navigation links. All values are responsive across breakpoints.
Nav Link Typography
Sidebar Panel
Font Size
px
Font Weight
Line Height
px
Link Color
Hover Color
Gap
px
RESPONSIVE GAP
Mobile
Hidden (mobile menu)
Tablet
24px gap
Desktop
32px gap
Nav links collapse into the mobile menu on smaller screens.
CTA Button
An optional call-to-action button that appears at the end of the navigation. Toggle it on or off and style it independently.
CTA Button
Sidebar Panel
Show CTA
Text
URL
/signup
Background
#171717
Hover Bg
#3D3D3D
Text Color
#FFFFFF
Border Radius
px
Padding X
px
Padding Y
px
Mobile CTA
Full Width on Mobile
CTA RESPONSIVE
Padding, radius, and font size are responsive. Enable full-width mobile to stretch the button edge-to-edge in the mobile menu.
Mobile Tablet Desktop
Mobile Menu
On small screens the nav links collapse into a mobile menu. Style the background, link color, borders, and padding independently.
Mobile Menu
Sidebar Panel
Background
#FFFFFF
Link Color
#272727
Border Color
#E4E4E4
Padding
px
MOBILE PREVIEW
Home
Features
Pricing
Blog
All Available Controls
Menu & Logo Menu select, logo upload, sizing
menuId: WordPress nav menu ID (select control). logoUrl: image URL. logoMaxWidth/logoMaxHeight (+Md/Lg): responsive, px. Logo renders as an <img> inside the header.
Background & Opacity Color + opacity, pre-scroll state
backgroundColor: hex color for the initial header background. bgOpacity: 0–100 (percentage). Applied as the default state before scrolling.
Scroll Background & Blur Post-scroll color, opacity, blur
scrollBgColor: hex color after scroll. scrollBgOpacity: 0–100. scrollBlur: boolean toggle. scrollBlurAmount: px value for backdrop-filter: blur(). Activated when .is-scrolled class is present. isFixed: boolean for fixed/sticky positioning. headerHeight (+Md/Lg): responsive, px.
Nav Links Typography, color, hover, gap
navFontSize/navFontWeight/navLineHeight (+Md/Lg): responsive typography. navColor: link color (hex). navHoverColor: hover state (hex). navGap (+Md/Lg): spacing between links, responsive, px.
CTA Button Toggle, text, URL, colors, radius, padding
showCta: boolean toggle. ctaText: button label. ctaUrl: link href. ctaBg/ctaHoverBg: background colors. ctaTextColor: text color. ctaRadius (+Md/Lg): border-radius, responsive, px. ctaPaddingX/ctaPaddingY (+Md/Lg): responsive, px. ctaFullWidthMobile: boolean, stretches CTA in mobile menu.
Mobile Menu Background, link color, border, padding
mobileBg: background color (hex). mobileLinkColor: link text color (hex). mobileBorderColor: separator border color (hex). mobilePadding: inner padding, px.