Mobile Header Displays Both Light and Retina Logos

[kfgomes]

Hi, I have been reading all the posts with similar issues in the forum and I cannot resolve my issue. On my homepage , I have a naked header (Light logo) an when I scroll down, It changes to regular logo. On the website, this works well. on the mobile screen both logos are displayed. They are the same size – but not aligned. I am not using the sticky heading on mobile and would prefer only the light logo be displayed if possible. The theme has been updated to the current version. how can I resolve this. please see the image attached.

Thanks.

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Its looking light logo to me. Please check after clear the cache of browser.
Thanks
Mohammad

Attachments:

You must be logged in to view attached files.

[kfgomes]

Thanks for looking into it so quickly. When I reduce my browser window on my computer, it looks fine. But on my iphone it doesn’t. I experience the same issue with both Chrome and Safari mobile browsers. I have tried clearing the cache on my iphone and id did not work.

[Mohammad – SUPPORT]

Hi,
Please try to use this custom css code:-

@media screen and (max-width: 767px) {
#logo img.retina {
    display: none !important;
}
}

Thanks
Mohammad

[kfgomes]

I just tried to add that code to my Appearance>Edit CSS but is has not resolved my issue. Any other suggestions? thanks for the quick responses.

[Mohammad – SUPPORT]

Hi,
Can you please check with another device?
Thanks
Mohammad

[kfgomes]

I have tried it on another iphone as well as a new Samsung phone. all devices are showing the same issue. see the attached image from a Samsung phone and let me know if there are other possible solutions.

thanks again.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

This looks like the retina media query, can you confirm which logo you wish to display on your mobile?

Thanks

[kfgomes]

Shoot, i didn’t see that you responded to this thread. on the mobile version i would just like to display the white logo.

[Mohammad – SUPPORT]

Hi,
My colleague will assist you when he comes online.
Thanks
Mohammad

[David Martin – Support]

Hi,

Please test this:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.naked-header.naked-light #header-section #logo.has-light-logo img.retina, .naked-header.naked-dark #header-section #logo.has-dark-logo img.retina {
    display: none!important;
    opacity: 0;
}
}

Thanks.

[kfgomes]

Worked perfectly. Thank you!!

[Mohammad – SUPPORT]

Hi,
Great thanks to David.
Mohammad