The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →To make a WordPress header stay visible while visitors scroll, apply sticky positioning to the header’s containing element—not to the logo or menu alone. In a block theme, wrap the Header Template Part in a root-level Group and choose Position > Sticky. If your theme does not expose that control, use a selector-based sticky-header plugin; if the site is built with Elementor, enable sticky behavior on the header’s parent container.
Antihost offers managed WordPress hosting with free migration, one-click staging and a 14-day free trial.
What a sticky header does
A sticky header remains attached to the top edge of the browser while the rest of the page moves underneath it. Visitors can open another page, jump to a section, or return to the home page without scrolling back to the top. This is different from a header that appears only at the beginning of a page and different from a permanently fixed header that is removed from normal document flow from the moment the page loads.
The implementation depends on how the site was built. WordPress block themes use the Site Editor and block positioning. Classic themes generally need a selector-based plugin or custom CSS supplied by the theme or developer. Elementor sites should use Elementor’s own header controls so the builder can keep the header’s containers and responsive settings consistent.
Choose the right implementation
| Method | Best fit | Configuration | Control over scrolling and appearance | Maintenance and troubleshooting |
|---|---|---|---|---|
| Native block positioning | Block themes that expose sticky positioning | Enable the setting in theme.json, then apply Sticky to a root-level Group, Row, or Stack in the Site Editor |
Integrated background, spacing, and block controls; no separate selector is required | Lowest maintenance when the theme supports it; inspect block hierarchy when the control is missing |
| Selector-based plugin | Classic themes or block themes without a Position control | Enter the main header container’s CSS selector, then set scroll distance and appearance in the plugin settings | Useful controls depend on the plugin; the selector determines exactly what sticks | Plugin updates, cache clearing, and theme-specific wrapper checks may be needed |
| Elementor | Sites whose header is built in Elementor Theme Builder | Select the header’s parent container, open Advanced settings, and enable sticky behavior | Builder-level sticky settings plus anchor offset for links that would otherwise be covered | Most predictable when the complete header is managed by Elementor; investigate container hierarchy in the builder |
Use the native method first when it is available. A plugin is the practical fallback for unsupported themes, while Elementor’s controls are the natural choice for an Elementor-built header.
As an Amazon Associate I earn from qualifying purchases.
Method 1: Create a sticky header with a block theme
Confirm that the theme supports sticky positioning
The Site Editor shows the Position control only when the active theme supports it. Theme authors can expose the control by enabling settings.position.sticky in theme.json. A theme can also opt into the broader design tools with appearanceTools, which includes sticky positioning among the available design controls.
If you maintain the theme, the relevant portion of theme.json looks like this:
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minute{
"settings": {
"appearanceTools": true,
"position": {
"sticky": true
}
}
}Do not edit a commercial or managed theme’s files casually: an update can overwrite the change. A child theme or the theme’s documented customization process is safer. If you are a site owner and the Position control is absent, use the plugin or Elementor path instead of forcing a file edit.
Open the header in the Site Editor
- In the WordPress dashboard, open Appearance > Editor to launch the Site Editor.
- Open the template or template part that contains the site header. Depending on the theme, this may be reached through Patterns or the template’s list of parts.
- Open List View so the block hierarchy is visible. Select the Header Template Part, not just the navigation block, logo, or a row inside it.
- Use the block’s options menu to wrap the Header Template Part in a Group block. WordPress does not allow positioning to be applied directly to a Header Template Part; the containing Group is the element that receives the sticky setting.
The wrapper matters because the Header Template Part is a template-part block rather than a positionable root block. Applying the setting to a child menu can leave the logo, utility links, or mobile controls behind as the page scrolls.
Apply Sticky to the wrapper
- In List View, select the new Group at the site root. The Group must be a top-level block in the relevant header structure; a deeply nested Group may not show the control.
- Open the right-hand Block settings panel.
- Give the Group a background color. Use a solid color or one that matches the header so text and page content below do not show through the sticky area.
- Open Position and choose Sticky. The supported root-level choices documented for this feature include Group, Row, and Stack.
- Save the changes, then open the front end in a new tab or use the Site Editor’s preview.
Sticky positioning is applied to the wrapper, while the Header Template Part remains inside it. Keep the wrapper’s height and padding intentional: excessive vertical padding can make the persistent area cover more of the page than expected.
Test navigation and section links
- Scroll through a long page and confirm that the entire header, including the logo and navigation, remains visible.
- Check that the header’s background hides the content moving beneath it. If words or images bleed through, revisit the wrapper’s background setting.
- Open the navigation on desktop and mobile widths. A menu that expands below the header still needs enough room to be used without being clipped.
- Test links that jump to an on-page heading. The destination heading should remain visible below the sticky header rather than disappearing underneath it.
- Save and preview after any hierarchy change. WordPress recommends checking navigation and scrolling on the front end, not relying only on the editor canvas.
Method 2: Use a sticky-header plugin
When this method is appropriate
Use a selector-based plugin when the active theme is classic, the block theme does not expose the Position control, or the header is assembled in a way that the Site Editor cannot position. The documented workflow uses the Fixed And Sticky Header plugin. Install and activate it from the WordPress dashboard, then configure the selector for the complete header container.
Find the correct header selector
The selector identifies the HTML element that should remain visible. Examples shown in the plugin listing include:
.site-header#masthead.main-header
Your site may use a different class or ID. To identify it, open the front end, use the browser’s developer tools, and inspect the element that encloses the logo, primary navigation, and any header controls. Choose the outer header container rather than only the navigation child or logo image. Applying sticky behavior to a child can produce a partial header, a gap, or a menu that moves independently from the branding.
Configure and verify the plugin
- In the dashboard, open the plugin’s settings page under Settings.
- Enter the selector for the main header container, including the leading period for a class or hash for an ID. For example, a class selector is written as
.site-header, while an ID selector is written as#masthead. - Set the scroll distance if the plugin provides that field. This determines when the header changes from its normal position to its sticky state.
- Configure the available appearance options, such as how the header looks after it becomes sticky. Keep contrast, logo size, and menu visibility consistent with the original header.
- Save the settings.
- Open the public site in a separate tab and scroll a page long enough to cross the configured distance. Check the header at desktop and mobile widths.
- If the old behavior still appears, clear the site cache and the browser cache before judging the change.
A plugin cannot correct a selector that points to the wrong element. If the logo sticks but the menu does not, or the header background disappears, inspect the rendered markup again and select the parent container that owns all header parts.
Method 3: Make an Elementor header sticky
Apply the setting to the parent container
For a header built in Elementor Theme Builder, configure sticky behavior inside Elementor rather than adding a second system on top of it.
- Open the WordPress dashboard and edit the header in Elementor Theme Builder.
- Select the header’s parent container. This should be the container that includes the complete header layout, not merely the navigation widget or logo.
- Open the Advanced settings for that container.
- Enable the container’s sticky behavior and choose the top edge as the position when Elementor presents a direction or location option.
- Set an anchor offset when necessary. The offset reserves space for the persistent header when a visitor follows an anchor link to a section.
- Update the template and test the published page at the breakpoints used by the site.
If only one widget was selected, the result may look like a sticky menu without a sticky header. Select the parent container again and confirm that the logo, navigation, search, account controls, and mobile toggle are all inside the element receiving the setting.
Fix a sticky header that does not work
Work from the symptom rather than changing several settings at once. The following checks cover the documented failure points and the layout conditions that commonly prevent a sticky element from behaving as expected.
The Sticky option is missing in the Site Editor
- Confirm that the active theme supports sticky positioning. The feature depends on the theme’s
theme.jsonsettings. - Use List View and select the wrapper at the site root. The control is limited to supported top-level blocks; a nested Group may not expose it.
- If you selected the Header Template Part itself, wrap it in a Group first. Positioning cannot be applied directly to that template-part block.
- Check that you are editing the active site-wide header, not a pattern or template that is not used on the page you are testing.
The header is enabled but scrolls away
- Confirm that the sticky setting is on the outer Group, Row, Stack, or complete Elementor container, rather than a child logo or menu.
- For a plugin, inspect the live page and compare the selector with the exact class or ID in the rendered markup. A typo, missing punctuation, or a selector from a different template will target nothing.
- Inspect parent wrappers for layout rules that interfere with sticky positioning, especially overflow behavior. Themes differ in their wrapper structure, so the rendered layout is more reliable than guessing a replacement selector.
- Check the front end after clearing caches. Cached CSS or HTML can make a correctly saved setting appear inactive.
Page content shows through the header
Select the sticky container and add a solid or matching background. A transparent sticky wrapper allows text, images, and other sections to remain visible behind the navigation and can make links difficult to read. The background belongs on the element that is actually sticky, not only on an inner menu block.
The header covers headings or anchor destinations
A persistent header changes the amount of visible space at the top of the viewport. Add an anchor offset in Elementor when using that builder. In a block or classic theme, add equivalent spacing or an offset for the target sections through the theme’s supported settings or stylesheet. Test several headings at different scroll positions; a single short heading can hide the problem.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesThe menu works on desktop but fails on mobile
- Test the mobile breakpoint after every change. The mobile toggle and expanded menu must be inside the sticky container.
- Check that the sticky header’s height does not cover the first row of the opened menu.
- Verify that the plugin selector or builder container is shared by the desktop and mobile header markup. Some themes render separate elements at different breakpoints.
- Inspect overflow and stacking behavior if the expanded menu is clipped by a parent wrapper. Correct the relevant wrapper in the theme or builder instead of adding sticky behavior to the menu item alone.
The header jumps, changes size, or leaves a gap
Compare the header before and after the sticky state. A plugin may apply a different appearance after the configured scroll distance, while Elementor or a theme may change padding or height through responsive settings. Keep the sticky container’s dimensions intentional and avoid applying a second sticky rule to a child element. If a gap remains where the header used to be, inspect the surrounding wrapper and the element that owns the header’s normal document space.
Design and accessibility checks before publishing
- Readable contrast: verify text, icons, and the logo against the sticky background in both normal and scrolled states.
- Clear focus: use the keyboard to tab through every navigation link, search control, account link, and mobile toggle while the header is sticky.
- Visible destinations: follow internal anchor links and confirm that headings are not hidden below the header.
- Responsive height: check narrow screens in portrait orientation. A two-line mobile header can consume substantially more viewport height than its desktop version.
- Complete container: keep branding, navigation, utility links, and responsive controls in the same sticky parent whenever the design calls for the whole header to persist.
- Front-end validation: test a representative long page, a short page, a page with images, and a page with in-page links. The editor preview alone does not reveal every wrapper or cache issue.
Native blocks, plugin, or Elementor: a practical decision guide
Choose native blocks when the theme supports them
The native approach keeps the setting in WordPress’s block hierarchy. There is no external selector to maintain, and the background, spacing, and responsive block controls remain in the Site Editor. It is the cleanest option for a block-theme site, provided the theme exposes sticky positioning and the header can be wrapped correctly.
Choose a plugin for unsupported or classic themes
A selector-based plugin can add the behavior without rebuilding the header. It is useful when the theme has no Position control, but it adds a dependency and requires an accurate selector. Theme updates that change classes, IDs, or wrappers can require you to revisit the plugin settings.
Quick Recap
Best Value
Choose Elementor when Elementor owns the header
Elementor’s Theme Builder keeps the sticky setting with the header container and provides an anchor offset in the same interface. This avoids mixing a plugin selector with Elementor’s generated markup. It is the most natural path when the site’s header, breakpoints, and templates are already managed in Elementor.
Free tools Windows power users keep installed
One-click scans. No signup required.
Launch checklist
- Identify whether the site uses a block theme, a classic theme, or Elementor Theme Builder.
- For a block theme, confirm sticky support, wrap the Header Template Part in a root-level Group, add a background, and choose Position > Sticky.
- For a plugin, identify the complete header selector, configure the scroll distance and appearance, save, and clear caches.
- For Elementor, select the parent header container, enable sticky behavior in Advanced, and set an anchor offset when headings would otherwise be covered.
- Scroll the published site at desktop and mobile widths.
- Check navigation, keyboard focus, dropdown or mobile-menu expansion, contrast, and anchor destinations.
- If the setting appears correct but fails, inspect the rendered hierarchy, selector, parent overflow behavior, and cached assets before replacing the implementation.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
