Header Sticky (PRO)

For more details check out the full Neve documentation and Neve PRO documentation.

📝Note: This option is available just in Neve PRO.

A sticky header will always stay on top of the screen, no matter if you scroll down the page.

How to enable it?

Navigate to Appearance > Customize > Header, choose any of the three rows ( Top, Main or Bottom ), and click on the little wheel that is in front of it. Enable the Stick to top option to make the header sticky.

If you want it to stick to the top of the page, just after you started scrolling, enable the Show only on scroll option.

Each of the header builder's three rows can be set up as Sticky and/or Show only on scroll, while the Transparent header option applies to the entire header area.

Want to shrink the sticky header on scroll? Follow this doc.

How the sticky header placeholder works

When Stick to top is enabled for a header row, Neve injects a sticky-header-placeholder element into the page. This placeholder reserves the same height as the sticky row so that the rest of the page content does not jump when the header becomes fixed as you scroll.

⚠️ Important: A header row can be marked as sticky even if it has no components added to it. In that case, the theme still renders the placeholder with the row’s minimum height, which can produce an unwanted gap on the page. Avoid enabling Stick to top on empty header rows unless you intentionally want that space reserved.

Troubleshooting whitespace or gaps

If you notice an unexpected gap at the top of your page after enabling a sticky header, it is most likely caused by the sticky-header-placeholder element. You can confirm this by opening your browser’s developer tools and inspecting the element near the top of the page.

Once you have identified the source, use one of the following approaches to resolve it:

• Disable Stick to top — Navigate to Appearance > Customize > Header, select the affected row, click the settings wheel, and turn off Stick to top. This removes the placeholder entirely.
• Enable Show only on scroll — In the same row settings, enable Show only on scroll. The header row will only become fixed after the visitor begins scrolling, which changes how the placeholder behaves and can eliminate the visible gap.
• Adjust the row height — In the row’s Style tab, reduce the minimum row height so the reserved space matches your design intent.
• Remove components from empty rows — If a header row has no components configured, do not set it as sticky. An empty sticky row will still render its placeholder and create whitespace with no visible content to justify it.