Hi all,
Thanks for this thread. It was very helpful.
I thought it'd be worthwhile summarising the code that this thread outlines given there was a late addition (without which the initial code doesn't work).
Below is what worked for me, using the dimensions of the images from the original post. Adjust them to the size of your logos.
The way I modify my CSS is to create an override.css file and load that last, which is why only the changed attributes are in the code below.
I hope it's useful for someone.
Cheers,
Oliver
Code: Select all
.imageset.site_logo {
background-image: url("./images/site_logo.png");
padding-left: 566px;
padding-top: 60px;
}
@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) {
.imageset.site_logo {
background-image: url("./images/site_logo_med.png");
padding-left: 460px;
padding-top: 49px;
}
}
@media only screen and (max-width: 500px), only screen and (max-device-width: 500px) {
.imageset.site_logo {
background-image: url("./images/site_logo_small.png");
padding-left: 320px;
padding-top: 34px;
}
.logo {
display: inline-block !important;
}
}