Change header colour & transparency using CSS

capole Nov 7, 2018 · 2:17 pm #10870

Hi,

I would like to know how to change the header colour and transparency using CSS. I would like the homepage to view similar to the below

https://croplife.org/

Thank you – George

Andrew Misplon Puro Nov 7, 2018 · 8:14 pm #10872

Hi George

You could try something like this inserted into Customize > Additional CSS:

.page-id-2 .site-header {
    background:rgba(0,128,0,.8);
}

.page-id-2 .site-content {
	margin-top: -112px;
}

2 in both rules needs to be changed to the page ID you’re targetting. To find a page id, go to Pages, edit the page and check the URL, the ID number is in the URL.

The background color is background:rgba(0,128,0,.8);
0, 128, 0 is the RGB value for the color.
0.8 is the opacity.
Both should be changed to suit your design.

When editing the page you can use the Page Settings meta box in the right column to remove the page title and other page-related design tasks.

Hope that helps 🙂

Change header colour & transparency using CSS

Sign in to reply