replace logo on mobile

Hi there,

Are you using a regular logo (Customize > Site Identity), a navigation logo, or the mobile header?

Let me know :)

Hi Tom,

I used the first option: Customize > Site Identity.

I tried to use a background picture instead, without logo. But that doesn't work. It gives no header at all. (Maybe there is a conflict with one of the plugins. I did not test that yet)

Is there an easy way to replace the logo where it is now?

Thanks!

Can you link me to the site? Thanks!

Hi Leo,
This is the link:
https://www.nvtoa.nl/
Thanks!

Have you tried uploading that TOA icon has the mobile header logo?
https://docs.generatepress.com/article/mobile-header/

Or that's not what you wanted?

I have tried that, but that was not what I wanted. I would like to replace the whole picture in the header by another picture for mobile devices. (so it should also keep the same scaling function as it has now).

You brought me up an idea that solves it..
I split the current header into two pictures: a logo and a background. I loaded it up into the place for logo and background. And now it looks good as well on the mobile.

Still, strange it was so difficult to replace the logo. If you know what I should have done, please tell me :)

But in this case: resolved!
Thanks

Ok then you would have to do this in the Before Header Content hook:

<div class="hide-on-mobile hide-on-tablet">
    <div class="site-logo">
        <a href="URL TO YOUR WEBSITE" title="YOUR SITE NAME" rel="home">
            <img class="header-image" src="URL TO DESKTOP LOGO IMAGE" alt="YOUR SITE NAME" title="YOUR SITE NAME">
        </a>
    </div>
</div>
<div class="hide-on-desktop">
    <div class="site-logo">
        <a href="URL TO YOUR WEBSITE" title="YOUR SITE NAME" rel="home">
            <img class="header-image" src="URL TABLET MOBILE TO LOGO IMAGE" alt="YOUR SITE NAME" title="YOUR SITE NAME">
        </a>
    </div>
</div>

Yup your way works too!

Hi Leo,

Thanks for the code! I'll save it in case of I need it another time.

And thanks for helping me out!!

You're very welcome!