How to create a sticky transparent page header?

Hello Bricks

I would like to know how to create a transparent global header template and it is sticky.

Just like this site: calmingdogbeds.com

Thanks

Hi Tallie,
welcome to the forum and a happy new year!

Create your header template as usual, set it to “sticky” and apply a scrolling background-color to it (under template settings > header).

Best regards,
timmse

Thank you very much for your answer, this does create sticky titles.
But there is this problem on other pages
The home page is normal.


The add container will also appear on the back of the header.

Hi @Tallie , :wave:

I believe there are 2 possible explanations for that behaviour:

  1. You forgot to set a scrolling background color, as @timmse suggested, or;
  2. Your Z index needs to be set higher, yet this is not a normal behavior AFAIK.

For point 2, you can try to set a higer Z index for the header container by selecting it, then going to Style > Layout > under POSITIONING you’ll find Z-Index. Set this to a higer number. Try 10 for example and see how this behaves.

1 Like

Thank you for your reply
I will try it.

1 Like