- This topic has 12 replies, 3 voices, and was last updated 6 years, 2 months ago by Leo.
September 18, 2017 at 2:05 am #387231Marjon Tas
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!September 18, 2017 at 8:51 am #387413TomLead DeveloperLead Developer
Are you using a regular logo (Customize > Site Identity), a navigation logo, or the mobile header?
Let me know 🙂September 18, 2017 at 12:00 pm #387533Marjon Tas
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!September 18, 2017 at 1:13 pm #387590LeoStaffCustomer Support
Can you link me to the site? Thanks!September 18, 2017 at 1:21 pm #387596Marjon Tas
This is the link:
Thanks!September 18, 2017 at 1:27 pm #387602LeoStaffCustomer Support
Have you tried uploading that TOA icon has the mobile header logo?
Or that’s not what you wanted?September 18, 2017 at 1:39 pm #387614Marjon 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).September 18, 2017 at 1:54 pm #387617Marjon 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!
ThanksSeptember 18, 2017 at 1:56 pm #387618LeoStaffCustomer Support
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>September 18, 2017 at 2:58 pm #387645LeoStaffCustomer Support
Yup your way works too!September 19, 2017 at 12:24 am #387804Marjon Tas
Thanks for the code! I’ll save it in case of I need it another time.September 19, 2017 at 12:24 am #387805Marjon Tas
And thanks for helping me out!!September 19, 2017 at 7:54 am #388038LeoStaffCustomer Support
You’re very welcome!
- You must be logged in to reply to this topic.