Hi team! I know that Wordpress allows for one site logo but I would like a different site logo below a certain screen size. If I set the main logo as the Wordpress site logo, is there a way that I can customise my theme to have more than one? I know a possible solution is that in the style.css, I can add a media query for max-width:768px, import the image within that, and possibly need !important to override the main site logo but is there a potentially less hacky approach? Thank you!
I think the best approach would be to use source set that comes with a
That would mean that on desktop it would load image_1.png and on the mobile, it would load image_2.png
No need to worry about CSS display: none property at all.
Source set is definitely more efficient. I’d be lying if I said I used it (used display:none lol). But once you set the logo as a Wordpress site logo, doesn’t it default to what you have stored for the site logo within Wordpress? if it does, then am I wrong in assuming that you can only have one site logo? Within Wordpress, I want to be able to set two.
As far as I know you can only have one Wordpress logo.
If you want to have different logo on mobile, I believe you would need to ditch the idea of using Wordpress logo and go just with a custom image, that would link to a homepage.
Okay. Just wanted to make sure there wasn’t a way of using more than one and I was just unaware of it.
However I would like to be able to edit the logos within WP admin - any suggestions?
The way i would approach that is to have a ‘settings’ page in the wpAdmin (MetaBox does those well but most custom post plugins will or you could just roll your own) and set the logo in that.
Then you would ‘pull’ those values as dynamic data wherever you needed them.
1 Like
Okay, I’ll investigate. Thanks for the suggestion
Unless you are wanting the user to have more fine control over the logo on various sizes, I don’t think the media query is hacky at all. 
1 Like
Thank you 
still so much to learn.
Hi Hanna,
I use metabox to create a setting page and have standard the option for two logo’s in there.
Then within the pinegrow editor you can use this code to access the settings page and grab the logo:
$mapImage = rwmb_meta( 'logo', ['object_type' => 'setting'], 'theme-options' );
echo '<img src=', $mapImage['full_url'], ' alt=Header Logo width=200 height=40>';
Where ‘logo’ is the id of your img custom field. And ‘theme-options’ is the id of your settings page.
Hope this helps.
Guido
Hi @Guido Guido, I’ve implemented an ACF solution for this now so that the site logos are editable for the user. Thanks for this suggestion though.