Float Header Block
A floating pill-style navigation header that starts full-width and transitions to a centered pill shape on scroll. Includes logo, menu button, and a CTA extracted from an inner button block.
FLOAT HEADER — BEFORE & AFTER SCROLL
TOP OF PAGE
Menu
AFTER SCROLL THRESHOLD
Menu
The header shrinks to a centered pill with rounded corners and optional blur after the scroll threshold is reached.
Dynamic block. This block uses render.php for server-side rendering. The editor save function outputs only the inner button-block markup (InnerBlocks.Content). At render time, render.php builds the full header HTML and regex-extracts the CTA link, text, and target from the saved button-block output.
When to use this block
- Modern marketing sites that need a floating, pill-style sticky nav
- Headers that should transition from full-width to compact on scroll
- Navigation with a full-screen overlay menu and optional accordion sub-nav
- Single CTA button in the header bar extracted from an inner block
Pill Behavior
Configure when and how the header transitions from full-width to centered pill. The pill shape activates after the user scrolls past the threshold distance.
Scroll & Pill
Sidebar Panel
Fixed
Scroll Threshold
px
Scroll Blur
Pill Border Radius
px
Border Color
HOW IT WORKS
Fixed (default true) — keeps the header pinned to the top of the viewport as the user scrolls.
Scroll Threshold — distance in pixels the user must scroll before the pill transition triggers.
Scroll Blur — applies a backdrop-filter: blur() to the pill for a frosted glass effect.
Pill Border Radius — the border-radius applied to the scrolled pill state. Use 999px for a fully rounded pill.
Logo & Menu
Upload a logo image and configure the menu toggle button with custom open/close labels.
Logo
Sidebar Panel
Logo URL
Max Width
px
Max Height
px
Menu Button
Sidebar Panel
Menu ID
Open Text
Close Text
Font Size
px
Font Weight
Logo max-width and max-height are responsive across breakpoints: Mobile Tablet Desktop
Colors
Full color control across every element — the nav bar itself (pre- and post-scroll), the menu button and close button, the overlay, and the bottom border.
Nav Bar Colors
Sidebar Panel
Nav Bar Bg
Scrolled Bg
Accent
Light
Dark
Border Bottom Color
Border Bottom Width
px
Menu & Close Button
Sidebar Panel
Menu Circle
Menu Icon
Menu Text
Close Circle
Close Icon
Overlay Colors
Sidebar Panel
Overlay Bg
Link Color
Hover Color
Overlay Navigation
When the menu button is clicked, a full-screen overlay displays the navigation links from the selected WordPress menu. Sub-navigation items can be shown as an accordion or hidden entirely.
Overlay Settings
Sidebar Panel
Sub-Nav Mode
Typography Size
px
Typography Weight
OVERLAY PREVIEW
Home
Services
Web Design
Development
About
Contact
Accordion mode shows child items with an expand/collapse toggle. “None” hides sub-nav items entirely.
CTA
The call-to-action button in the header comes from an inner button-block placed via InnerBlocks. This is a hybrid save pattern — the editor saves the button-block markup, and render.php regex-extracts the URL, text, and target from it at render time.
How it works
- In the editor, add a Button Block as the only inner block
- Set the button text, URL, and target (
_blank/_self) as usual save.jsoutputs the button markup via<InnerBlocks.Content />- On the front end,
render.phpuses regex to extracthref, link text, andtargetfrom the saved markup - The extracted values are injected into the server-rendered header HTML as the CTA link
Important
- Only one inner block is expected — a single button-block
- The button-block styling (colors, radius) is not carried over — render.php applies its own CTA styles using the header color attributes
- If no inner button-block is found, the CTA area is simply omitted from the rendered output
All Available Controls
Scroll & Pill Fixed, threshold, blur, pill radius, border
fixed: boolean (default true). scrollThreshold: number in px — distance before pill activates. scrollBlur: boolean — enables backdrop blur on scrolled state. pillBorderRadius: px value for pill shape (e.g. 999). borderColor: hex color for the pill border.
Logo URL, max width/height (responsive)
logo: object with url (image URL), maxWidth and maxHeight (responsive across breakpoints). Upload via the media library in the sidebar panel. The logo is rendered as an <img> element inside the header bar.
Colors Nav bar, overlay, menu/close buttons, border
Nav bar: navBarBg, scrolledBg, accent, light, dark. Menu button: menuCircleColor, menuIconColor, menuTextColor. Close button: closeCircleColor, closeIconColor. Overlay: overlayBg, overlayLinkColor, overlayHoverColor. Border: navBorderBottomColor, navBorderBottomWidth (px).
Overlay & Typography Sub-nav mode, overlay text size/weight, menu button text
overlaySubNav: "accordion" or "none". Overlay typography: overlayFontSize (px), overlayFontWeight. Menu button typography: menuFontSize (px), menuFontWeight. menuOpenText: label when closed (e.g. "Menu"). menuCloseText: label when open (e.g. "Close").
Layout & Spacing Header height, padding, max width (responsive)
headerHeight: responsive (px) across 3 breakpoints. padding: responsive (px) — horizontal inner spacing of the header bar. maxWidth: constrains the header content width (e.g. 1200px). All responsive: Mobile Tablet Desktop
CTA (Inner Block) Button-block extracted via render.php regex
Add a single Button Block as an inner block. Set the link URL, button text, and target attribute in the editor. At render time, render.php regex-extracts href, inner text, and target from the saved button markup and injects them into the header CTA. Button styling is controlled by the header color attributes, not the inner block styles.