Custom header background color for blog posts ONLY

[jimmymcloud]

On my Wordpress site, I’m trying to set a custom background color for the header/nav bar that only applies to single blog post pages. I don’t believe my theme (Divi) gives me that specific option.

Basically, the background of my header bar is set to transparent site-wide, but I want to give it a background color (#252525) on single blog posts.

Can anyone help me with the custom code snippet?

[hungpham]

Have you tried to add custom CSS with .single class?

[jimmymcloud]

Yes, I’ve attempted several things but I guess I’m not getting the entire code just right

[ralphm]

Can we see the site? You might find there’s a class or ID high up in the HTML that is specific to blog pages that you could leverage to set a specific style.

[jimmymcloud]

Absolutely, should have thought to include it in the OP.

Jimmy McLoud

Specifically, looking to add a header background color not to /blog, but the individual posts.

Thanks!

[ralphm]

At the moment your style is written like this:

#main-header {
    background-color: #25252500 !important;
}

But those final two zeros make the color fully transparent. So just remove them and try this:

#main-header {
    background-color: #252525;
}

[markelijah001]

Divi lacks built-in control for custom header color on blog posts only. Here’s the fix:

Add this CSS:
CSS

body.single-post #main-header { background-color: #252525; }

(Replace #252525 with your color code)

Place it in Theme Customizer > Divi > Custom CSS or Divi Builder > Post Content > Custom CSS.