Layout · Gutenberg
Sticky Header block for WordPress
A fully-styled site header with logo (image or text), navigation links, and an optional CTA button. Sticks to the top on scroll with a shrink animation. Supports light, dark, glass, and gradient style variants.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
A fully-styled site header with logo (image or text), navigation links, and an optional CTA button. Sticks to the top on scroll with a shrink animation. Supports light, dark, glass, and gradient style variants.
Inspector panels on this block: Logo, Navigation Links, CTA Button, Style & Behavior. Those titles come from index.js, not from a shared template.
Behavior controls: “Style & Behavior — Style” options: Light, Dark, Glass, Gradient.
Where to find it
Gutenberg inserter → Layout → search “Sticky Header” (block name `blockenberg/sticky-header` in block.json). Style it in the sidebar after insert.
How to use Sticky Header block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Sticky Header”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Logo. Set “Show Logo”, “Logo Text (fallback)”, “Logo Image Width (px)”, “Site URL”.
- Check the published page. The view script reads HTML data attributes: data-shrink, data-sticky. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show Logo | On/off toggle in the inspector. On by default. Saved as `showLogo`. |
| Logo Text (fallback) | Text field in the inspector. block.json default: MySite. Saved as `logoText`. |
| Logo Image Width (px) | Numeric range control in the inspector. Range 40–300. block.json default: 140. Saved as `logoWidth`. |
| Site URL | Text field in the inspector. block.json default: #. Saved as `siteUrl`. |
| Label | Text field in the inspector. |
| URL | Text field in the inspector. |
| Open in New Tab | On/off toggle in the inspector. |
| Show CTA Button | On/off toggle in the inspector. On by default. Saved as `showCta`. |
| Button Text | Text field in the inspector. block.json default: Get Started. Saved as `ctaText`. |
| Button URL | Text field in the inspector. block.json default: #. Saved as `ctaUrl`. |
| Open in New Tab (Cta Open New) | On/off toggle in the inspector. Off by default. Saved as `ctaOpenNew`. |
| Style & Behavior — Style | Select control; the chosen value is saved on the block. Options: Light; Dark; Glass; Gradient. block.json default: light. Saved as `style`. |
| Sticky on Scroll | On/off toggle in the inspector. On by default. Saved as `sticky`. |
| Shrink on Scroll | On/off toggle in the inspector. On by default. Saved as `scrollShrink`. |
| Show Mobile Menu Toggle | On/off toggle in the inspector. On by default. Saved as `showMobileMenu`. |
| Border Bottom | On/off toggle in the inspector. On by default. Saved as `borderBottom`. |
| Drop Shadow (when scrolled) | On/off toggle in the inspector. Off by default. Saved as `shadow`. |
| Header Height (px) | Numeric range control in the inspector. Range 40–120. block.json default: 70. Saved as `height`. |
| Shrunk Height (px) | Numeric range control in the inspector. Range 36–100. block.json default: 56. Saved as `heightShrunk`. |
| Max Width (px) | Numeric range control in the inspector. Range 760–1600. block.json default: 1200. Saved as `maxWidth`. |
| z-index | Numeric range control in the inspector. Range 1–9999. block.json default: 1000. Saved as `zIndex`. |
| Nav Gap (px) | Numeric range control in the inspector. Range 8–64. block.json default: 32. Saved as `linkGap`. |
| CTA Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 8. Saved as `ctaRadius`. |
| Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Text / Logo | Color control in the inspector. block.json default: #0f172a. Saved as `textColor`. |
| Nav Links | Color control in the inspector. block.json default: #374151. Saved as `linkColor`. |
| Link Hover | Color control in the inspector. block.json default: #6c3fb5. Saved as `linkHoverColor`. |
| Accent | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
| CTA BG | Color control in the inspector. block.json default: #6c3fb5. Saved as `ctaBg`. |
| CTA Text | Color control in the inspector. block.json default: #ffffff. Saved as `ctaTextColor`. |
| Colors — Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `borderColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-shrink, data-sticky.
- Headers keep aria-expanded in sync so screen readers hear open vs closed.
When this is the right block
- A fully-styled site header with logo (image or text), navigation links, and an optional CTA button. Sticks to the top on scroll with a shrink animation. Supports light, dark, glass, and gradient style variants — that is the job of Sticky Header, not a generic content block.
- Use it when you need the editor control labeled “Show Logo”, which exists on this block’s inspector.
- It matches pages about header, navigation, sticky.
- Inserter grouping: page structure, sections, and composition.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Sticky Header block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Sticky Header”. It sits under Layout. After insert, open Logo and set “Show Logo”, “Logo Text (fallback)”, “Logo Image Width (px)”, “Site URL”.
What makes Sticky Header different from other Blockenberg blocks?
A fully-styled site header with logo (image or text), navigation links, and an optional CTA button. Sticks to the top on scroll with a shrink animation. Supports light, dark, glass, and gradient style variants. Inspector labels on this block include “Show Logo”, “Logo Text (fallback)”, “Logo Image Width (px)”, “Site URL”.
Is the Sticky Header Gutenberg block free?
Yes. Sticky Header ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Sticky Header to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Logo, Navigation Links, CTA Button, Style & Behavior).
Related layout blocks
Mega Menu
Full-width mega menu navigation with column groups, icons, images, CTAs and rich hover panels.
Content Menu
In-page anchor navigation that highlights the current section as the user scrolls — can float fixed on the left or right, or sit inline.
Page List
A styled list of pages or links with optional icons, hierarchy, and rich color controls.
Side Menu
Hierarchical vertical navigation with collapsible sections for docs, wikis, and multi-section pages.
Breadcrumbs
SEO-friendly navigation trail with Schema.org markup showing the current page hierarchy.
Gradient Hero
Full landing page hero with animated gradient/mesh background, badge, headline, CTA buttons, and social proof row.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Sticky Header from the Gutenberg inserter.