[Pferdi]

Hi there,

On my site (http://www.zig-zag-um-die-welt.de) I do have a static solid black Header Bar on the Homepage as well as on any Posts. I would like to change it to the “transparent/ solid” behavior which you can witness on this site: https://astroforumspace.com/
I will try to describe what I have in mind: When completely scrolled up, the Header bar Background should be transparent. When not scrolled completely up, the Header bar Background should be black.
Is this possible and how? 🙂

Thank you and best Regards,
Pferdi

[Skandha]

@pferdi: Hello Pferdi,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

#header-wrapper #header-content {
    position: absolute;
    background-color: transparent;
    bottom:0;
}
.header-top #header-content {
	background-color: #2b2b2b !important;
	bottom: unset !important
}

Let me know if this works out!
Kind Regards,
Skandha

[Pferdi]

Hi Skandha,

Thank you for sending that CSS. 🙂
I adapted it a Little bit and got quite good results on my Landingpage (which contains a list of Posts as Fullscreen featured Images). Unfortunatly going into one of the Posts, the Header bar Shows as being Grey.
I found out: The amount of Grey is controlable through the opacity of the Background-Color (in #header-wrapper #header-content). Changing the Color values themselfes has no effect. Don’t know if that has to do with it.

This is where I am now:

/*Landing page non-first Post */
.header-top #header-content #header-wrapper{
background-color: rgba(43,43,43,0.3) !important;
bottom: unset !important;
}

/* Landingpage first Post and regular Post*/
#header-wrapper #header-content {
position: absolute;
background-color:rgba(43,43,43,0.3);
/*bottom:0;*/ /*commented this one out to have the Landing page behave normal 🙂 */
}

Thank you again, Best regards,
Pferdi

[Skandha]

@pferdi: Hello Pferdi,
To change the opacity of the header background color you will need to change the value of 0.3 in the following code you have added in your Additional CSS section.

/* Beitrag, Landingpage erster Post */
#header-wrapper #header-content {
    position: absolute;
    background-color:rgba(43,43,43,0.3);
	/*bottom:0;*/
}

The value set as 0.3 is the opacity value. The value needs to between 0.1-1. So to the change the opacity change its value.
Let me know if this works out!
Kind Regards,
Skandha

[Author]

Posts