Custom header background color for blog posts ONLY

CMS & WordPress
1

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?

2

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

3

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

4

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.

5

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

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

Thanks!

6

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;
}
1 Like
8

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.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.