The most reliable way to make a WordPress header stay visible while visitors scroll is to apply sticky positioning to a root-level Group block that contains the header. In a modern block theme, enable sticky positioning if the theme does not already expose it, wrap the Header Template Part in a Group, give that Group an opaque background, and choose Position > Sticky. If your theme has no Position control, use a selector-based sticky-header plugin; if the site is built with Elementor, configure the header’s parent container in Elementor’s Advanced settings.
Antihost offers managed WordPress hosting with free migration, one-click staging and a 14-day free trial.
What a sticky header does—and what it does not do
A sticky header remains attached to the top edge of the browser as the page moves underneath it. The navigation, search control, account link, or other controls in that header stay available without requiring a visitor to scroll back to the top. This is useful on long documentation pages, game guides, category archives, and storefront-like layouts where visitors move between sections frequently.
“Sticky” is different from permanently taking the header out of the document flow. A correctly configured sticky container still occupies space in the layout, then holds its position when it reaches the top of the viewport. The header should have a background that matches the page (or an intentionally designed contrasting color), otherwise text and images can show through it as they pass underneath.
WordPress offers three practical implementation paths:
- Native block controls: best when the site uses a block theme that supports sticky positioning.
- A selector-based plugin: useful for classic themes or themes that do not expose the Position control.
- Elementor: the natural option when the header was built in Elementor Theme Builder.
Choose one path for a given header. Mixing several sticky systems can make the container move twice, apply conflicting offsets, or make troubleshooting much harder.
Choose the right method for your site
| Method | Theme compatibility | Configuration or code | Scroll and appearance controls | Maintenance and troubleshooting |
|---|---|---|---|---|
| Native block editor | Block themes that expose sticky positioning; the theme may need a theme.json setting. |
Site Editor controls; no custom CSS is required for the basic setup. | Position is set on a root-level Group, Row, or Stack. Other visual settings come from the block controls. | Integrated with WordPress and generally easiest to maintain; hierarchy and root-level restrictions matter. |
| Fixed And Sticky Header plugin | Classic or block themes when you can identify the main header container’s CSS selector. | Enter a selector such as .site-header, #masthead, or .main-header in the plugin settings. |
Documented settings include scroll distance and appearance options. | Selector changes after a theme update can break the behavior; inspect the rendered markup and clear caches when testing. |
| Elementor Theme Builder | Sites whose header is built with Elementor. | Header parent container’s Advanced settings. | Sticky behavior plus an anchor offset when links would otherwise land under the header. | Most convenient inside an Elementor workflow; the parent-container hierarchy and offset still need testing at each viewport. |
Method 1: Create a sticky header with the WordPress Site Editor
This is the preferred route when the theme supports block positioning. The exact labels below follow the current Site Editor workflow documented by WordPress.
As an Amazon Associate I earn from qualifying purchases.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, 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 minute1. Confirm that sticky positioning is available
Open the Site Editor and inspect the header-related blocks. A supported theme exposes a Position control in Block Settings for eligible blocks. At the theme level, sticky support is enabled with the settings.position.sticky setting in theme.json. A theme can also enable appearanceTools, which opts it into the design tools that include positioning controls.
If you maintain a custom theme, the relevant portion of theme.json looks like this:
{
"settings": {
"appearanceTools": true,
"position": {
"sticky": true
}
}
}Do not edit a parent theme’s files directly: an update can overwrite the change. Use the theme’s supported customization method or a child/custom theme, and validate the JSON syntax before saving. If you do not control the theme files, continue to the Site Editor and see whether the control is already available.
2. Open the header template part
- From the WordPress dashboard, open Appearance > Editor (the Site Editor).
- Open the template or pattern that contains the site header. Depending on the theme, you may reach it through Patterns, Template Parts, or a page template preview.
- Open List View so you can see the block hierarchy rather than selecting a visual child such as the logo or navigation menu.
- Select the Header Template Part.
WordPress specifically does not allow positioning to be applied directly to a Header Template Part. The documented workaround is to wrap that template part in a containing Group, then apply sticky positioning to the Group.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minute3. Wrap the template part in a Group
- With the Header Template Part selected in List View, open its options menu.
- Choose the command to Group or Wrap the block.
- Confirm in List View that the new Group is the parent and the Header Template Part is inside it.
- Select the new Group itself, not the Header Template Part, logo, navigation block, or an inner row.
The Group must be at the site-root level for the sticky control to appear. WordPress documentation lists Group, Row, and Stack as supported root-level blocks. A Group nested inside another layout block may not show the control even when the theme supports sticky positioning.
4. Add an opaque background
With the root-level Group selected, open Block Settings and set a background color. Use the same color as the header or a deliberate contrasting color with sufficient text contrast. This background prevents page content from being visible through the header while it is fixed at the top.
If the header includes a transparent effect by design, test it over every type of content that can scroll behind it. A background that looks acceptable over a hero image may make dark text unreadable over a light article section.
5. Apply sticky positioning
- In the Group’s Block Settings, open Position.
- Choose Sticky.
- Keep the Group selected at the root level while saving; selecting a child block can hide the control or apply the setting to the wrong element.
- Save the template or changes when prompted.
The setting is attached to the containing Group, so the complete header—including its background and navigation—moves as one unit.
6. Preview scrolling and links
Open the front end in a new tab and scroll through a long page. Verify that:
- the complete header remains visible after it reaches the top;
- the background hides content beneath it;
- the header does not jump, duplicate, or leave a second empty bar;
- keyboard focus remains visible when tabbing through navigation links;
- the layout still works at narrow mobile widths and at increased browser zoom;
- an internal navigation link lands with the destination heading visible rather than hidden behind the header.
Learn WordPress recommends previewing navigation and scrolling after saving. Test an archive, a single post, and any custom template that uses a different header structure; a template can contain a different Header Template Part from the one you edited.
Method 2: Use a selector-based sticky-header plugin
A plugin is the practical fallback when a classic theme or unsupported block theme provides no usable Position control. The documented Fixed And Sticky Header plugin workflow depends on targeting the complete header container with its CSS selector.
1. Install and activate the plugin
- In the dashboard, open Plugins > Add New.
- Search for Fixed And Sticky Header.
- Install the documented plugin, then activate it.
- Open its settings page from the dashboard menu.
Keep a backup or staging copy before changing front-end positioning on a production site. A sticky rule affects every page that uses the selected selector, so a selector that is too broad can change unrelated bars or embedded layouts.
Free tools Windows power users keep installed
One-click scans. No signup required.
2. Identify the main header selector
Use the browser’s developer tools to inspect the outer element that contains the logo, navigation, and any header controls. The plugin listing gives examples such as:
.site-header#masthead.main-header
Your theme may use a different class or ID. Copy the selector exactly as it appears in the rendered HTML. Target the outer header container, not only the logo image, navigation menu, search icon, or an inner row. If you target a child, the background may remain in normal flow while only one control attempts to stick.
3. Configure distance and appearance
Enter the selector in the plugin’s header field, then set the documented scroll distance and appearance options. A distance of zero generally means the header becomes sticky as soon as it reaches the top; a larger value delays the effect. Choose colors and any visual treatment that keep the header legible over the page.
Save the settings, open the public site, and scroll a page that is long enough to pass the header. Check both the initial state and the state after scrolling; some themes style the header differently once a fixed class is added.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Best Value
4. Clear caches and retest
If the old behavior remains, clear the site’s page or optimization cache and the browser cache, then reload in a private window. Cached HTML, CSS, or JavaScript can make a correctly saved selector appear ineffective. If the header still does not stick, inspect the live DOM again: theme updates can rename a class, render different markup on mobile, or place the visible header inside a different wrapper.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Method 3: Make an Elementor header sticky
Use this route when the header is created in Elementor Theme Builder. The setting belongs on the header’s parent container, so selecting only the navigation widget or logo will not produce a complete sticky header.
- Open the Elementor Theme Builder and edit the header template.
- Select the parent container that holds the full header row or header section.
- Open the container’s Advanced settings.
- Enable the sticky behavior and choose the applicable device breakpoints.
- Set an anchor offset when an in-page link would otherwise place its destination beneath the persistent header.
- Update the template and test the published front end, not only the Elementor editor canvas.
Use the smallest container that includes all elements that should remain visible. If you select an inner navigation row, the logo or utility controls can scroll away. If you select a wrapper around unrelated page content, too much of the layout may become sticky.
Fixes for a sticky header that does not work
The Position control is missing
- Confirm the theme supports block positioning and that
settings.position.stickyis enabled where you can edittheme.json. - In List View, select a root-level Group, Row, or Stack. The control is not offered for every block or for every nested Group.
- If the selected block is a Header Template Part, wrap it in a Group first; positioning cannot be applied directly to that template part.
- If the theme does not expose the control, use a selector-based plugin or the builder that created the header.
The header is enabled but scrolls away
- Check that the sticky setting is on the outer container, not a logo, menu, or inner row.
- Inspect the rendered layout and its wrappers. Theme-specific overflow behavior or a wrapper hierarchy can prevent the intended container from sticking.
- Verify that the selector in a plugin exactly matches the live header element, including punctuation and capitalization.
- Test a page that uses the same header template. A different page template may render another header or selector.
- Clear site and browser caches after changing a plugin selector or builder setting.
Content shows through the header
Add a solid or matching background to the sticky Group or header container. In the block editor, set the Group’s background color; in a plugin or Elementor, style the complete sticky container rather than an inner menu. Recheck contrast over images, videos, and alternating section colors.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Links land under the header
A persistent header reduces the visible area at the top of the page. Use the builder’s anchor-offset setting when available, as Elementor documents for this case. In the block editor, add enough top spacing to the destination section or use a theme-supported scroll-offset solution. Test headings reached from menus, table-of-contents links, and browser back/forward navigation.
Mobile layout breaks
- Test portrait and landscape orientations, not only a desktop-width browser window.
- Make sure the mobile menu’s expanded panel is part of the sticky container or intentionally positioned below it.
- Check that the header does not cover the first line of content when the address bar changes size on a phone.
- Use device-specific sticky settings in Elementor when the desktop and mobile headers are structurally different.
The page jumps or shows two headers
Inspect the DOM for more than one active sticky system. A native Group, plugin selector, and Elementor setting applied to the same markup can each add positioning behavior. Disable all but the method that owns the header, then retest from a clean cache.
Accessibility and usability checks before publishing
Sticky positioning changes how much content is visible and how keyboard users move through a page. Treat the header as a persistent interface, not merely a visual effect.
- Keep keyboard focus indicators visible against the header background.
- Ensure the sticky container does not cover skip links, modal close controls, or the first focused element.
- Check text contrast in both the normal and scrolled states.
- Keep the header’s height reasonable on small screens; a tall persistent bar can leave little room for content.
- Verify that menu buttons have clear expanded and collapsed states when a mobile navigation panel is used.
- Test with browser zoom and a screen reader’s landmark navigation where possible.
- Avoid hiding content beneath the header simply to preserve a visual alignment; adjust offsets or spacing instead.
A practical testing checklist
- Identify which system owns the header: native blocks, a plugin, or Elementor.
- Confirm the full header container is the element receiving sticky behavior.
- Scroll a long post, an archive, and a page with a different template.
- Check the header at desktop, tablet, and mobile widths.
- Activate every navigation item, including dropdowns, search, account links, and menu toggles.
- Open an in-page anchor link and confirm the destination heading is visible.
- Reload the page, use the browser back button, and test a hard refresh after clearing caches.
- Tab through the header and verify focus visibility and logical order.
- Compare the header over light, dark, image, and video content.
Which approach should you use?
Use the native Site Editor method when the site is a block theme with sticky positioning enabled. It keeps the behavior in WordPress’s template hierarchy and avoids an additional dependency, but it requires the root-level Group structure described above.
Recommended Free Tools
Use the selector-based plugin when a classic or unsupported theme has no Position control and you can reliably identify the complete header selector. Its scroll-distance and appearance settings are useful, but the selector must be revisited if the theme changes its markup.
Use Elementor’s controls when Elementor already owns the header. Configuring the parent container avoids adding a second system, and the anchor-offset option addresses the most common in-page navigation problem.
Quick Recap
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.
