- This topic has 5 replies, 2 voices, and was last updated 10 years, 6 months ago by
.
-
Posts
-
Hi!
Is it possible to show a different Logo for mobile users? My Desktop Logo has some writings which are to small to read for mobile users. So I’d like to show a completely different Logo for mobile users.
I tried something like this
@media screen and (max-width: 768px) { .site-header { background-image: url(URL TO DIFFERENT IMAGE); } }But I don’t know how to rewirte it so it fits for the logo image.
It would be really great if there is a solution 🙂
Thanks in advance and
best regards,
JulyHi July. Take a look at this post for some information on the same question.
Hi bdbrown!
Thanks for your reply.
With the following code it looks like we’re on the right way.
<div class="hide-on-mobile"> <div class="site-logo"> <img src="URL TO YOUR DESKTOP LOGO IMAGE" alt="" /> </div> </div> <div class="hide-on-desktop"> <div class="site-logo"> <img src="URL TO YOUR MOBILE LOGO IMAGE" alt="" /> </div> </div>But to be honest, I can’t help myself with this code. Where do I have to place the code? Also, how does the browser know which logo is the right one? As there is no rule for mobile or desktop.
Thanks!
JulyThe HTML for the two logos goes in the GP Hooks “Before Header Content” hook. GP Hooks is one of the available Add-ons. The theme has code to display the correct logo based on the designated class. I think the Add-ons are a great value but, as an alternative, you could add this action to a child theme functions.php file:
add_action('generate_before_header_content','generate_insert_different_logos'); function generate_insert_different_logos() { ?> <div class="hide-on-mobile"> <div class="site-logo"> <img src="path-to-your-desktop-logo.jpg" alt="Your site title" /> </div> </div> <div class="hide-on-desktop"> <div class="site-logo"> <img src="path-to-your-desktop-logo.jpg" alt="Your site title" /> </div> </div> <?php }Hope that helps.
That’s great bdbrown, that helped me alot! Thanks for your efforts 🙂
The support here is truly amazing!Warm regards,
JulyYou’re very welcome. Glad to help.
- You must be logged in to reply to this topic.
