Transparent header, but sticky with background color

[popiah]

Hi! i saw some post about this… but i don’t know how to apply it… how to set delay for 2nd duplicate sticky header?

transparent header on main screen… once scrolling down… sticky header show up with background color…

thanks… step by step will be great…

[danielkjennings]

I’m looking for this as well. As you’ve seen that this is intentionally not an option with the current header/footer builder etc… etc… What I believe is the case from reading what it seems like what we both read is that we need to apply CSS to the sticky header… as “Joao” stated in his thread:

When sticky bars become fixed, they have an “x-bar-fixed” class applied to them.

so we just need to apply the CSS to that class … time to googlefu

I will say that I wish this was an option “out of the box” but oh well ¯_(ツ)_/¯

EDIT: follow this link: https://theme.co/apex/forum/t/header-transparency-to-opaque-on-scroll/4797/4

• the post from RueNel, i follow it and it works for me hope it works for you, good luck… I’ll try to check back and see if I can provide any assistance

[popiah]

i try out the css code… but the flow not smooth and the transparent not 100% transparent…

[danielkjennings]

are you’re saying, the code works for you? but that the caveat is the transition from transparent to opaque is not smooth? or it just doesn’t work at all

[popiah]

The code is working.
1st … the transparent background looks abit white not 100% transparent.
2nd… the inline font need to change color as well and dropdown.

do you have other option not using css? but the pro only showing sticky for second layer?

[christian]

Hey @popiah,

I’m not sure what you’re trying to achieve here. The official way to setup a transparent bar to colored sticky bar is:

1. Create a transparent bar
2. Duplicate the transparent bar
3. Set the background of the duplicated bar to a solid color then set it to Sticky
4. To set the delay, increase the Trigger Offset

Here’s a video recording of the setup:

Another way is setting a background using CSS. Please bear in mind though that what I will show you is only a guide and issues arising from the use of it and further improvements would be outside the scope of our support.

The CSS given in the other thread might not work for you because it was for another user’s specific setup.

I’d recommend you add a class to your Bar so you could target the bar in CSS. Then, add this code to your Header CSS. Set the bar’s background to transparent and make it sticky.

.sticky-color {
  transition: background-color 1s;
}
.sticky-color.x-bar-fixed {
  background-color: yellow;
  transition: background-color 4s;
}

Here’s a recording to show you that it works.

If the CSS approach doesn’t work on your end, you can message a user through our Peer to Peer forum or hire a developer to investigate the issue in your site. If you want, we do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co.

Thank you for your understanding.