Header Not True Colour


For some reason my header is coming out a different shade on Chrome.

It works fine on Android mobile and iPad.

I have tried playing with the code on my child theme but nothing can get the header to be the true colour.

My website is www.innovationcci.port.ac.uk

Thanks in advance!

Hello there,

I am sorry to hear you’ve run into issue. I’ll try anything I can to help. But, could you please take some screenshots illustrating the issue you are seeing? For image files, please share the free file hosting service like Google Drive or Dropbox, and then post their links here to allow me to access them.


Hi Karis

Thank you for your help!

I have linked a picture from Google Drive below.


Many thanks


Hello Charlie,

Thank you for the screenshot. But I still can’t identify the issue you are experiencing. Here is what I’m seeing on my Chrome (latest version).


Please advise.


Hi Kharis

Can you see the header is not the same color as the background even though they have the same hex code?


All the best


Hello Charlie,

Thank you for your advise. It isn’t considered as an issue. As by default the header background color applies hex transparency. To fill it with a solid color, you need to add the below CSS code into your site’s additional CSS option under Appearance > Customize > Additional CSS.

.site-header.float-header {
   background-color: #31313b;