I’m experiencing an issue with the sticky header overlapping page content when scrolling, and I need your help to resolve it correctly.
Here is my setup:
– WoodMart theme (latest version)
– Main header row set as sticky
– Top bar row set as NON-sticky
– I have enabled a boxed/pill-shaped header using custom CSS on .whb-general-header .container
– Homepage has a full-width hero slider
The problem:
When the page first loads, everything looks correct — the top bar is visible, the header sits below it, and the hero slider starts beneath the header. However, when the user scrolls down and back up, the sticky header overlaps the top of the hero slider or inner page content (shop page banner, category header images etc.), cropping them.
What I have tried:
– Setting .whb-sticky-placeholder to display: block
– Using body:not(.home) to apply different positioning on inner pages
– Enabling and disabling the “Make it overlap” option in Header Builder global settings
– Various padding/margin overrides on the sticky header
None of these have fully resolved the issue. The placeholder height does not seem to correctly account for the sticky header height when the top bar scrolls away.
Could you please advise on the correct way to:
1. Have a non-sticky top bar that scrolls away normally
2. Have a sticky main header that does NOT overlap page content on inner pages (shop, category, product pages)
3. Ideally still allow the header to overlap the hero slider on the homepage only
Thank you in advance for your help.
Best regards
.
