URGENT: Logo Problem

Hi there,

The area where the logo should have showed up on mobile looks empty.

This issue occured after I add css code below on the purpose of using different logo when scrolled down on the page.
There is no problem on desktop view.

I tried some of the suggestions, but none of them worked. How can I fix it?

I hope you guys can help me out!

Thanks

.header-scrolled .logo img { opacity: 0; }
.header-scrolled .logo a {
background-image: url(https://www.aclteslim.com/wp-content/uploads/2015/08/ACLteslim-Logo-Erkeksm.png);
background-size: contain;
background-repeat: no-repeat;