How to build transparent header?

Wen · May 7, 2022, 8:37am

How to build transparent header by Bricks ?
The header-element is over the hero-element.
I try some methods, but it didn’t work.

Thanks very much.

ninmorfeo · May 7, 2022, 9:10am

Just give z-index to header then use negative margin for body content to move it under header

yankiara · May 7, 2022, 9:13am

Hi,

If you make the header sticky, it will be transparent and over your content.

If you want a transparent header but NOT sticky, just use absolute position and z-index on your header’s root container:

Wen · May 7, 2022, 9:36am

Thanks so much, yankiara.
I try 2 methods you mentioned. The 2nd suit for me. but I need set top value as 10 px, otherwise the header can’t display totally.

Wen · May 7, 2022, 9:39am

Thanks ninmorfeo. I try your way. It’s also a good method.