Need help with a uploading logo for retina screens

[edwina]

Hi, I’m using Integral Pro and would like to have the site identity looking good on a retina screen. The logo does not look good at this moment.
I’ve installed https://wordpress.org/plugins/wp-retina-2x/, but that plugin will only help with images on posts/pages (which is great, by the way).

Could you help me out with a css or php solution (I’m not much of a coder).

Thanks,
Edwina

[Hans (Support Admin)]

Hi @edwina

You can upload a logo 2x the size, then use some CSS to reduce it to the required size.

.navbar-brand > img {width:50%;}

You can enter the code above in Integral Options > Custom Code > Custom CSS field.

Hope that helps.

[edwina]

Thanks Hans, worked like a charm!

[Hans (Support Admin)]

You’re welcome 🙂

[CMurrin]

Hi Hans,

Sorry to reopen an old thread, I have just tried this fix for my site and it does work great on a laptop but then the logo appears really small on a mobile phone. Is there any way to stop it from being so small on a smaller screen but to keep the better image quality?

Thanks,
Chris

[Hans (Support Admin)]

Hello Chris,

The logo is reduced in size so that it doesn’t conflict with the mobile menu.

If you look on line 1860 of the style.css file you will find the following code,

.site-title {max-width: 75%;}

You can comment it out or change the percentage.