Hello,
When the “Make it Overlap” option is enabled in Header Builder, the header will overlap the content below it instead of pushing it down.
How Header Overlap Works:
- The header becomes transparent and sits on top of the page content.
- This is commonly used for full-width banners or hero sections to create a modern design.
Solutions:
1. Disable Header Overlap: The header will behave normally and push the content down.
2. Adjust the Header Background: Set a semi-transparent or solid background for better visibility.
3. If you want the overlap effect, Try to add the following custom css code in Theme Settings > Custom CSS > Global Custom CSS area.
.whb-main-header {
position: relative !important;
background: rgb(249 239 239 / 80%);
}
I recommend keeping the Header Overlap enabled on the Home Page for a modern and sleek look. However, for the Shop Page and Category Pages, you can create a new custom header and disable the overlap option to ensure better visibility.
This way, your Home Page will retain an overlapping header, while the Shop Page will have a clearer and more structured layout.
You can read our detailed documentation for further help:
https://xtemos.com/docs/woodmart/options-for-pages/
Best Regards,
.
