Add option to push content down below the header when sticky header is enabled

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

1 Like

Maybe I didn’t understand well, but there is a workaround: Theme Styles > Content > Content Margin.
Have a nice weekend,
Goran

@tole011

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.

1 Like

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>
2 Likes

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.