[Resolved] replace logo on mobile

[Marjon Tas]

Hi Tom,

I did try to change the logo image (which covers the header section) with a mediaquery for mobile. I tried a lot, but it doesn’t work. I guess I should use a hook. Can you help me with the correct code? I just would like to change the url for a different picture. And it should adjust the size the same way as is does now.

Thanks!

[Tom]

Hi there,

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

Let me know 🙂

[Marjon Tas]

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!

[Leo]

Can you link me to the site? Thanks!

[Marjon Tas]

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

[Leo]

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?

[Marjon Tas]

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).

[Marjon Tas]

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

[Leo]

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>

[Leo]

Yup your way works too!

[Marjon Tas]

Hi Leo,

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

[Marjon Tas]

And thanks for helping me out!!

[Leo]

You’re very welcome!

[Author]

Posts