Breakdance Builder allows designers to create sticky headers that remain visible at the top of the screen while users scroll down the page. This feature improves navigation by keeping menu links accessible at all times. However, a common problem on mobile devices is that the sticky header overlaps the top of the page content, hiding headlines, buttons, or other important elements that should be visible when the page loads. Visitors see a header covering the first few lines of content, which creates a frustrating experience and makes the website feel broken.
This problem occurs because the sticky header is removed from the normal document flow and positioned fixed at the top of the screen. Without proper offset handling, the main content does not know that it needs to start below the header rather than at the very top of the page. The result is that the first part of the content gets hidden behind the header, requiring users to scroll to see what should have been immediately visible. This issue is especially common on mobile devices where screen space is limited and headers take up proportionally more space than on desktop computers.
The most common cause of this problem is that the Breakdance Builder header template does not have a proper offset setting configured, or the offset value does not account for the header height on mobile devices. Another cause is that the theme itself adds extra padding or margins that interfere with Breakdance’s sticky positioning. Caching plugins can also cause inconsistent behavior by serving different versions of the header to different devices.
Why Breakdance Builder header overlaps content on mobile devices
When a header is set to sticky in Breakdance Builder, it receives CSS position: fixed, which removes it from the normal document flow. Fixed-position elements do not affect the layout of other elements on the page, meaning the main content will render at the very top of the page as if the header were not there. To prevent overlapping, the main content needs either a padding-top value equal to the header height, or the header itself needs to use position: sticky instead of fixed, which reserves space in the document flow.
Breakdance Builder typically adds the necessary padding to the body or main container when sticky headers are enabled, but this automatic offset calculation can fail on mobile devices for several reasons. The header height may be different on mobile (because of responsive menu changes), but the offset calculation may still be using the desktop header height. The mobile breakpoint may not be correctly configured, causing the wrong CSS to apply. Additionally, if the header contains elements that load after the initial page render (like lazy-loaded images or webfonts), the final header height may be larger than the initial offset value.
Another cause of overlapping headers is that the theme itself adds padding or margin to the body element that interacts poorly with Breakdance’s sticky header implementation. Some themes have their own sticky header functionality that conflicts with Breakdance, causing double offsets or no offsets at all. Disabling theme header features and relying solely on Breakdance for header management usually resolves these conflicts.
How to check if the header offset is correctly calculated
Open the frontend of the website on a mobile device or using browser developer tools in mobile emulation mode. Scroll to the very top of the page and check whether the first content element is visible below the header or hidden behind it. If content is hidden, inspect the main content container using browser developer tools to see what padding-top or margin-top values have been applied. Compare the calculated header height (visible in the element inspector) with the offset value applied to the content container.
Step by step guide to fixing Breakdance Builder overlapping header
Follow these steps in order to prevent the Breakdance Builder header from overlapping content on mobile devices. Start with the simplest solutions before moving to more advanced CSS customizations.
- Edit the header template in Breakdance Builder and check the sticky header offset settings
- Set a manual offset value equal to the header height on mobile devices (typically 60-80 pixels)
- Enable “Push content” or “Reserve space” option in sticky header settings if available
- Check that responsive breakpoints are correctly configured for mobile devices
- Clear all caches including plugin cache, CDN cache, and browser cache completely
- Test the header on actual mobile devices instead of relying on browser simulation tools
- Disable any theme header features that might conflict with Breakdance’s sticky header
- Add custom CSS to manually set padding-top on the main content container for mobile devices
- Update Breakdance Builder to the latest version available from the official website
- Consider using a non-sticky header on mobile if the problem cannot be resolved
Custom CSS to fix overlapping sticky header on mobile
Add this CSS to Breakdance Builder global settings or theme customizer to manually add offset for mobile devices. This CSS adds a padding-top to the main content area equal to the header height on screens narrower than 768 pixels. Adjust the padding value to match the actual height of your sticky header on mobile devices.
@media (max-width: 768px) {
.bricks-content, .breakdance-main, main {
padding-top: 70px !important;
}
}
Breakdance Builder overlapping header troubleshooting reference table
Here is a reference table for diagnosing overlapping header problems in Breakdance Builder based on specific symptoms you might encounter.
| Symptom | Most likely cause | Recommended solution | Header works on desktop but overlaps on mobile | Mobile header height different from desktop offset | Set manual offset for mobile devices | Header overlaps only on first load then fixes itself | Lazy-loaded content changes header height after load | Set fixed height on header or disable lazy loading | Header overlaps when scrolling back to top | JavaScript scroll event not updating offset | Update Breakdance Builder to latest version | Different overlap behavior on different pages | Page-specific CSS or template overrides | Check each page for custom header offset settings |
|---|
For more information about Breakdance Builder header configuration, visit the Breakdance Builder page on wpwizzy.com.
Preventing Breakdance Builder header overlap problems in the future
Always test sticky header behavior on multiple mobile devices during the design process, as browser simulation tools can miss device-specific rendering differences. Set a fixed height on the header container to ensure consistent offset calculation across all devices, rather than relying on automatic height detection. Clear all caches immediately after making any changes to header settings or styles, and test the frontend in incognito mode to avoid browser cache interference.
Disable any theme header features that might conflict with Breakdance’s sticky header, and consider using a non-sticky header on mobile devices if offset calculation continues to cause problems. Document any custom CSS added for header offset for future reference, and regularly test header behavior after plugin or theme updates to catch regressions early. Keep Breakdance Builder updated to the latest version to benefit from bug fixes and improvements to the sticky header system.