Responsive Header Color

Hi there! (Fist thing first: Great Theme, thanks)
The logo I’ve inserted in the heather is a black and transparent, so, the background image is white in order to see the logo. The problem is that when I change the size of the window, there is a size in which the header is black and then my logo disappear… How could I change the color to white?
Thank you very much!

Hi, do you have the URL of your site?

Hi Awan!


I was just trying last night. The final project should be more complex, of course. But if you could help me with the black thing I’d be pleased.



Just checking your site and I dont see the black color in the header and the logo is displayed fine

Hi Awan,

Yes, you’re right. But me too… I mean… Try to enlarge the window’s size of the browser, slowly, and you could see there is a moment in which the whole header turn to black. I think that it happens just when the drawer menu change its position to the right (you can’t see it now because it’s white but trust me, it’s there).

Hope you could see that too.

Thank you!


Sorry but I still can’t see the header turn to black when I resize the browser. Can you take a screenshot for it?


Hi Awan!

Here you’ve the image:

As you’ll see the heather is black but it happens only at a specific size of the window: before that point (bigger window), the heather is transparent and after that point (smaller window), the heather turn white (so my logo is ok in this last case).

I’ve tried it on Safari and Chrome and the effect is the same.

Thank you in advance!


Oh I see… its happen when the screen is between 991px - 1024px width. Please try to apply these css code to fix it:

@media only screen and (max-width: 1024px){
  .site-header {
    background-color: transparent;

you can use Simple custom css to put the css code

Nice Awan!
I did just what you suggested and now it works perfectly. No more black header at any size…
Thank you very much!
Have a nice week :slight_smile: