change the site-header image on mobile

Hi Bojan,

That happens when I test it on an iphone mobile device, not on the desktop.
https://www.creativehosp.com/temp.

Thanks again,
waterbod

Actually I have the same problem on the desktop – whenever you return to home, the original header flashes first.

cheers waterbod

Hey there waterbod,

I see what you mean now, the reason for that is that the image is displayed before js loads, once it loads it displays the smaller image which is also the reason I couldn’t see it on my local host.

You can fix that by removing the image in the first place with CSS and then displaying it in the script. So first you’ll need to add css to remove header image, please add the following code:

#site-header a img {
display: none;
}

When done with that please add this code in jquery provided above:

$('#site-header a img').show();

Add it below this part:

$( window ).resize( function() {
       change_image_res();
   } );

The end result should look like this https://screencast.com/t/WYUtpwkC.

This should fix the issue with the header image.

Hope this helps ??

Best regards,
Bojan

Hi Bojan,

Yes problem solved..

Thanks for all your help with this ??
cheers waterbod

Glad I could help ??

Best regards,
Bojan

Hi Bojan,
I do have a same problem and tried to fix it with your additional CSS. It works well when I change the header picture in a .jpg file, but doesn’t do it with an .png.
Do you have a solution? https://www.heleenvanhaaren.nl

This is what I added so far:

@media screen and (max-width: 600px){
div#site-header {
background: url(your_image_url);
}

#site-header img {
visibility: hidden;
}
}

#site-header already changed in #logo

Hey there Johan Stam,

I’m not sure why .png file is not working for you, maybe there is an issue with the actual image?

I’ve tested code in inspector using .png image and everything seems to be working just fine https://screencast.com/t/nSjdMapj.

Since you already changed site header with logo your code should work.

Best regards,
Bojan

Hi Bojan,

Still not working and I don’t get it. In your screenshot the background is covered by the image. Using an actual .png would show the background color. Can I send you the particular .png file?

Kind regards,
Johan

Hey Johan,

It was just a random image I searched for. You can find the link to it here

Download the image, upload it to your library and try adding the same CSS with it.

Best regards,
Bojan

Hi Bojan,
I solved it (after a lot of trial and error). The problem was the size of the new image.
Cheers, Johan

Glad you managed to do that ??

Have a great day!

Cheers,
Bojan