Header for posts and news page transparent

[444media]

I am using CSS to make my Slider Rev slides appear behind my transparent header. Works great and as I want it on all pages. I just use a Slider Rev slide as a header for all internal pages I create. However, I just set up a News page (blog) and on that page ( http://armorgen.com/news/ ) the header is transparent (which I understand based on the settings) but for the page, the Slider Rev slide is not appearing behind the header, only below it, making the menu items hard to read.

And on the posts, to where I can’t add a “below masthead slider” the header is transparent and hard to read menu items. example: http://armorgen.com/so-youre-going-outside-a-physics-based-coronavirus-infection-risk-estimator-for-leaving-the-house/

Can I use CSS to made the header background a solid color on the News page and on the posts?

Thanks!

[christian]

Hey @444media,

Yes, you can use CSS if you know how to code. You can put your CSS in Theme Options > CSS which is the Global CSS.

If you don’t know how to write CSS though, you can proceed in either one of the following options.

1. Learn CSS and learn how to use the browser’s element inspector.
2. Hire a developer to write the CSS for you.
3. Upgrade to our Pro theme so you can create a custom header and assign it globally and then create another header and assign it to your news page only. There’s also many options available like achieving an overlay navbar.

Hope that helps.

[444media]

OK…while, yes, I should learn CSS, I would like to, I don’t have the time right now and have on many occasions asked a support question here and your team has very kindly provided me with the necessary CSS that has worked beautifully. Do you think you could help me out with the CSS for this particular situation? I have been a loyal X Theme user for 4 years now with 17 licenses purchased including 2 Pro and just bought another one yesterday.

Thank you Christian…I would really appreciate it!

[friech]

Hi @444media,

Please add this to Theme Options > CSS

.blog .x-navbar,
.single .x-navbar {
	background-color: black; 
}

But please do mind that this bit of “customization” falls outside of the support that we can offer, it would ultimately be your responsibility to take it from here.

If you are more interested in having more control over the Header I suggest that you consider the Pro theme which has a Header builder and you can use various elements to create a Header.

Kindly check the Elements section of our documentation to learn more on which elements you can use on Pro Header/Footer builders.

Cheers!

[444media]

Thank you Friech! I very much appreciate your help with this!

[ruenel]

You’re welcome!
We’re glad @Friech were able to help you out.