Bricks Builder allows designers to create sticky headers that remain visible while scrolling.
A sticky header should stay at the top of the screen no matter how far down the page goes.
But sometimes the header disappears completely when the visitor starts scrolling down the page.
The header may reappear when scrolling back up, or it may stay hidden forever.
This problem makes navigation difficult because users cannot access menu links or search functions.
Why Bricks Builder header disappears on scroll
The sticky header feature in Bricks Builder uses JavaScript to detect scroll position on the page.
If the JavaScript fails or is delayed, the header may not receive the correct sticky instructions.
Caching plugins that defer JavaScript can break the scroll detection functionality completely.
The header’s z-index may be lower than other elements that overlap it during scrolling.
Another plugin’s JavaScript may conflict with Bricks Builder’s scroll detection scripts.
How to check if sticky header is configured correctly
Edit the header template in Bricks Builder and select the header section or container element.
Navigate to the sticky settings in the element’s advanced or position settings panel.
Check that the sticky option is enabled and set to “Top” for proper scroll behavior.
Verify that the sticky offset is set to 0 or a small positive number for immediate stickiness.
Test the header on different pages to see if the problem occurs everywhere or only on specific pages.
Step by step guide to fixing Bricks Builder sticky header
Follow these steps to restore proper sticky header behavior in Bricks Builder on scroll.
- Edit the header template and verify that sticky is enabled and set to top position
- Set the sticky z-index to 9999 to ensure the header stays above all other elements
- Disable JavaScript defer or delay features for Bricks Builder scripts in caching plugins
- Clear all caches including plugin cache, CDN cache, and browser cache completely
- Check the browser console for JavaScript errors that might affect scroll detection
- Temporarily deactivate all other plugins to test for JavaScript conflicts
- Switch to a default WordPress theme to test if the problem is theme-related
- Add custom CSS to force the header to stay sticky if JavaScript continues to fail
- Update Bricks Builder to the latest version available from the official website
- Contact Bricks Builder support with specific details about the sticky header problem
Custom CSS to fix Bricks Builder sticky header
Add this CSS to Bricks Builder global settings or theme customizer for sticky header support.
.brx-header-sticky {
position: sticky !important;
top: 0 !important;
z-index: 9999 !important;
background: white !important;
}
This CSS forces the header to stay sticky regardless of JavaScript execution on the page.
Adjust the background color to match the website’s header design for consistency.
Bricks Builder sticky header troubleshooting reference table
Here is a reference table for diagnosing sticky header problems in Bricks Builder.
| Symptom | Most likely cause | Recommended solution |
|---|---|---|
| Header disappears completely on scroll | JavaScript scroll detection failed | Disable JavaScript defer for Bricks Builder scripts |
| Header reappears when scrolling up | Sticky offset or threshold configured incorrectly | Adjust sticky settings to immediate stickiness |
| Header flickers or jumps while scrolling | CSS transition or transform conflicts | Remove transitions from header elements |
| Header works on some pages but not others | Page-specific CSS or template issues | Check each page template for sticky header overrides |
| Header covers content when sticky | No offset or margin for main content | Add padding-top to body or main container equal to header height |
For more information about Bricks Builder headers, visit the Bricks Builder page on wpwizzy.com.
Preventing Bricks Builder sticky header problems in the future
Test sticky header behavior on multiple pages and devices after any JavaScript-related changes.
Exclude Bricks Builder scripts from defer and delay features in all caching plugins.
Use CSS sticky as a fallback when JavaScript-based sticky headers cause problems.
Keep Bricks Builder and all other plugins updated to their latest versions regularly.
Document custom CSS added for sticky header functionality for future reference needs.
Test sticky headers after every WordPress, plugin, or theme update to catch problems early.