SOLVED: Behavior of Sticky Header

I can see the behavior of “Sticky Header” is similar to “Absolute Header”, so “Sticky Header” is activated all the times. On the other hand, when you try to modify a page with a sticky o absolute header is very difficult because the header is displayed above the constructor .

This behavior is the same in Bricks 1.1.3.

3 Likes

Agree, this is very annoying :wink:

@thomas It is something that needs to be resolved, as everyone suffers from it. When fixing the header, I have to add a top margin in the first section on all models.

Does the toggle arrow icon to show/hide the header in the builder help resolve this issue?

Hi! I can see the problem disappears, but I can see the behavior of the absolute header and the sticky header is the same.

Hi, Thomas. I think that header should push the content of the page down by default. If we need to position content from the top, we can do that with margins.

2 Likes

Let’s say your sticky header has a height of 100px. Then you’d like the content to have a margin-top of 100px, right?

This can already be set globally via the “Content Margin” setting under “Settings > Theme Styles > Content > Content Margin”.

Pushing the content down if a sticky header exists is not always desired.
Example: On https://bricksbuilder.io I need the sticky header to NOT push the content (first section) down. As I need it to “overlay” the content.

Furthermore, this behavior would require additional JavaScript, to properly calculate the header height on the fly according to the current device. As the header height on mobile is often larger than on desktop.

1 Like

Thanks for the clarification. I’m aware of “Content Margin” and that’s how I make my layout. BTW, what about “Sticky” behavior for any container (without custom CSS)? :slightly_smiling_face:

Sticky elements are easy to implement as it’s nothing more than setting ‘position: sticky’. But we had to leave if out of the core for now, as it conflicts with an overflow setting we need on another HTML tag. Hopefully we’ll find a solution for that one as well.

1 Like

When I do this all looks good in the builder. The new container is shown below the header.
But when I preview it or view on front end then the top Container is still hidden by the Header.
So it seems even setting the Content Margin in Theme Styles I still need to add an extra 100px margin to my first container - which then makes the builder display look odd as now has 200px margin.

@alanj Mhh, the “Content Margin” working fine for me in combination with the sticky header. Can you share the playground exact URL that illustrates this issue, so I can look into it for you?

Sure,
Structure issues-1 (Builder) (bricksbuilder.io)

I’ve been moving bits around on there as was going to try and video the Structure issues, but got distracted by the Content Margin.
As you’ll see I have both the Content Margin set to 100px and a Margin on the 1st Container set to 100px … but only 1 seems to be being used.
Preview and View in Frontend show different results.

Alan

I’ve had a look at your playground account. The “Content Margin” was set, but there was no “Template Condition” defined. I’ve done that now. That’s why the content margin was not applied.

The sticky header is using “position: fixed” and the absolute header uses “position: absolute.” Here is a great article about the difference between the different “position” values: position - CSS: Cascading Style Sheets | MDN

Ah many thanks.
I had thought that I’d done that but maybe forgot to save afterwards.

Working as expected now though. Thanks again

1 Like

I have a sticky header in desktop & I want sticky header to not scroll down with cursor in responsive or you say in mobile how I do it. I’m working in bricks and this is issue i cannot resolve. So guide me how i do it

Hi Muhammad,
What exactly is the header on mobile supposed to do? Be visible (fixed) all the time or scroll away with the content, so it’s only available at the top of the page?

Best regards,
timmse

I assume ylu want the header to be sticky on desktop and non stick for tablet or mobile view?

yes i want that is there a way to do it in bricks

fixed in top not scroll down with cursor. I want that