Change logo on mobile

No disrespect, but that’s not true. I spent some time researching it and it’s quite simple. If you don’t know html, it only requires a little googling.

1. Remove your logo image

2. Install Custom Headers and Footers
https://wordpress.org/plugins/custom-headers-and-footers/
It hasn’t been update in a while but I’ve no issues with it working with the Make theme.

3. Add the following code to your stylesheet or child theme stylesheet:

@media screen and (min-width: 800px) {
   #mobilelogo { display:none; }
}

@media screen and (max-width: 800px) {
   #notmobilelogo { display:none; }
}

4. Add the following code to the “Meta Headers” section of Custom Headers and Footers. (Settings->Custom Headers and Footers)

<div id="mobilelogo">
<img src="IMAGEURL">
</div>

<div id="notmobilelogo">
<img src="IMAGEURL">
</div>

From there, customize the html for the images to make it fit the layout you have.

Make sure you clear the cache on your mobile browser before testing. I made the mistake of not doing that and it was a headache.

You can also change “mobilelogo” and “notmobilelogo” to whatever you want. Those are just convenient.

For anyone finding this and using my solution, I have recently discovered that it will break Favicon – Real Favicon Generator. For some reason, the extra code interferes with Favicon’s code. No clue why.