Black Header image at top not showing after CDN enabled

Hi Team,

I recently CDN support for my website but the top black image is gone and only comes up after scrolling down
Please see the attached screenshot as well as the question posed by the CDN support team:

Hello,
Thank you for contacting BunnyCDN.
I had a look, and this looks to be something to do with the CSS on the site itself.

With the CDN enabled, if I edit style.css to put the background-color back to black, the page appears to work. It appears there are 2 different versions of the header here:

.site-header loads initally, and has the transparent background, but is then replaced with .site-header.float-header which seems to resolve the issue.

Are you able to look at the CSS on the origin itself, and let me know if this is still the case?

Best Regards

Any help on this would be greatly appreciated

Hello there,

​Please accept my apologies for the delay in response. I was stuck in draft. I really appreciate your patince.

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      body:not(.siteScrolled) .site-header {
        background-color: #000;
      }
      .sydney-hero-area {
        margin-top: 40px;
      }
    }

Flush any applied cache before reloading your site to check the changes.

Regards,
Kharis
aThemes Support

I will try this

Thanks for your reply, Kharis

1 Like

You’re welcome!

Let me know how it works for you or if you need anything else I can help with.

Regards,
Kharis
aThemes Support

This is working now. Thanks very much!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support