Hi!
When the sticky header is enabled, it would be so much better if we can have the option to push the content body down below the header.
*refer to this screenshot, and I am sure you will understand what I am talking about.
*hopefully this can be added as soon as possible. Current project needing this.
Looking forward to hearing from you.
Thank you!
Regards,
Jornes
Maybe I didnāt understand well, but there is a workaround: Theme Styles > Content > Content Margin.
Have a nice weekend,
Goran
I donāt want to adjust it manually, as you will need to manually check the height of the header.
I want this option so the content will automatically push down below the header(by auto calculate the height of the header).
Agree, but not a big deal for me, tbhā¦
@tole011
The height of the header will be different when itās in mobile view. So, you have to manually check the height of the header carefully .
Maybe itās not a big deal for you, but it would save your work and .make your workflow even faster when this option is available then.
Of course, the requested option is a no brainer. All theme builders has it. And rightly so. Mostly even in reverse order: the header pushes the content downwards (as he does in most websites) and the overlay solution is an option for āspecial occasionsā, e.g. landing pages. I was surprised and disappointed that Bricks only has this shabby do-it-yourself solution to offer.
Look at all the comfortable one click display options in the header builder in ācoders paradiseā Oxygen! Sticky header, no sticky header (not fixed: sticky!), display or no display when sticky per row, special appearances when sticky, etc. Itās all available with a click on a buttonā¦
Please, please, no work arounds. Those are for exceptions or very personalized options, not for crucial obvious tasks. For workarounds I donāt need a theme builder.
100% agreed, the sticky header should automatically generate a padding at top of <body>, with the same value as its own height.
Currently, the header is sticky AND overlays the <body> element.
@Guebwiller mentions Oxygen sticky header as an example of a page builder pushing the content below, so does beaver Builderās sticky header.
As a workaround, iāve set a top padding to <body> using jQuery.
Itās not perfect, the headerās height is not immediately properly defined on page load (due to CSS transition probably), so i have to delay the JS execution, which creates a visible glitch on frontend.
In a Code Element in the footer:
<script type="text/javascript">
jQuery(document).ready(function($) {
if($('header.sticky').length) {
setTimeout(function() {
var headerHeight = $('header').outerHeight();
$('body').css('padding-top', headerHeight);
console.log('Header height: ' + headerHeight);
}, 400);
}
});
</script>
I also would REALLY love to have this. But it also has to be mobile-responsive.
The JS script above gets the headerās height on page load, so it should be fine in every situation, desktop or mobile.
It has a weakness though: Bricks sticky header has a CSS transition set which prevents the script to get the proper height until the transition is finished.
Thatās why iāve set a timeout in the script.
It wonāt work properly if the page takes too much time to load (slow network).
Could be enhanced i suppose, by listening to the headerās transition status: to be continued.
Possible by enabling the Scroll On Sticky setting under āSettings > Template Settings > Headerā when editing your header template:
Please let me know if this needs another thread.
But when you set the header to sticky on scroll and then set the hero container (which now sits below it), to 100VH it goes down further past the fold due to taking into account header height.
Does anyone know how to have a sticky / fixed header but have the container below it with main content only fill the viewport height.
I know you could the container to absolute but this impacts image being hidden behind the header.
