How to create a sticky transparent page header?

How To
1

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

2

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

image
image617Ă—1080 29.8 KB

3

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.

Snipaste_2022-01-04_14-52-11
Snipaste_2022-01-04_14-52-111908Ă—902 65.9 KB

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

4

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.

image
image299Ă—1029 14.2 KB

1 Like
5

Thank you for your reply
I will try it.

1 Like
6

But how should I make the logo change on the sticky header? ( it changes from white for the transparent header and then full colored on the sticky header?

7

This is a great feature, but how do I disable the sticky header on mobile?
My current workaround is:

/* Disable Sticky on Mobile Portrait (<479px) */
@media (max-width: 478px) {
  #bricks-header.sticky.fixed {
      position: relative;
  }
  .bricks-site-wrapper {
  	top:0px!important;
  }
}

Got a better solution?

1 Like
8

Hi Max,

I think I would do it exactly the same way.

Greetings
timmse

9

is it possible to make the hamburger menu sticky on mobile websites but leave the rest of the header at the top of the page?

10

I followed this and everything worked but the logo still doesn’t change color after scroll.

What’s the best way to tackle this?

1 Like
11

It didn’t worked for me, do you have any other solution for disabling sticky option header at mobile device?