How to make Header appear transparent, so that the background of bar 2 is visible

[Keez_80]

Hello Support,

I use 2 bars in the header.

How do I make the top bar of the header appear transparent, so that the background of bar 2 can be seen.

I wanted the same header effect as https://keewebsites.com.au/ .

I am able to make the bar 1 transparent, but is shows the background of Bar1 rather than of bar 2.

Help would be appreciated. Thanks.

[tristup]

Hi Keezia,

Thanks for reaching out.
To get a similar effect in the header, you need to follow few steps that are given below.

Step 1: Create a copy of the first bar.
Step 2: Set first bar background color to transparent
Step 3: Make the second bar Hide initially.
Step 4: Make second bar as sticky
Step 5: Set background color to second bar along with content scrolling off, initial postion set to absolute.

Please find the video describing the above steps and the output:
https://www.awesomescreenshot.com/video/1238326?key=7bee90df6eb53f14d061419e33dc6a8e

Hope it helps.
Thanks

[Keez_80]

Thanku tristup, i will check this.

[tristup]

Hi Keezia,

Please let me know how it works for you.

Thanks

[Keez_80]

Hi Tristup, Thank you for the creating the video.

I followed your instructions. But i am not able to get bar1 to be ‘see through’, so that image on Bar2 can be seen :(.

Credentials are in previous cases incase you want to login. The header name is phone header.

I would like bar 1 to be see through, even before scrolling, like in the pic below.

[tristup]

Hi Keezia,

The background color of the bar is set to transparent but it shows the body background color instead of that image as the image starts just after the bar ends.
And that is why the image is not visible to the bar background. I have created a test header and set to a test page, please find the URL in a secure note.

You can try by replicating the header created by me, please set the image position so it comes in the back of the bar.

Thanks

[Keez_80]

Now bar 1 is half way transparent, but i didn’t do any image adjustments.
The height of Bar 1 and Bar2 is the same. But ideally i want to have bar 1 smaller and bar 2 to be much bigger

If an image is added to the Bar, there are no options to move the image up, accept size and position which is ether center cover, top, bottom, left , right and none seem to make a difference.

If an Image is set in the container… i can only move the image with negative margin values, which cause it to go over bar 1.

Thanks for helping me, any other suggestions?

[marc_a]

Hi Keezia,

Your homepage header is now white transparent the same on this website https://keewebsites.com.au/. What I did is just to increase the z-index and set the bar to position absolute and at the same time change the background color to white with an opacity of 0.3.

Hope that helps and let us know how it goes.

Thank you.

[Keez_80]

Thank You Marc . Appreciate it alot!

Is there a way to increase the opacity of the bar, as we scroll down the page. So that its visible?

[tristup]

Hi Keezia,

Regretfully, there are no such options for increasing opacity on the scroll. What you are expecting is a part of the customization, I would suggest you hire a developer who can assist you to do this customization.

Thanks

[Keez_80]

Ok Tristup. I will read some CSS.
Thank you no worries

[marc_a]

Hi Keezia,

You’re welcome and it’s our pleasure to help you. If you have any other concerns, feel free to reach us.

Thank you.