Thanks for choosing Tracks!
This is a bit tricky, but there is a way. Try the following CSS:
.logo {
display: none;
}
.site-title a {
display: block;
background-image: url(http://image.jpg);
background-size: contain;
background-repeat: no-repeat;
width: 100px;
height: 100px;
}
@media all and (min-width: 600px) {
.site-title a {
background-image: url(http://image.jpg);
width: 100px;
height: 100px;
}
}
You see where it says “http://image.jpg”? Replace the first one with the URL of the logo you want to use on mobile, and the second one with the logo you want used for desktops/laptops.
Lastly, you can use the width and height values to specify exactly how large the logo should be. The first two again are for mobile, and then second two are for wider screens.
Just copy & paste the code above into the “Custom CSS” section in the Customizer (Appearance > Customize), and it should take affect right away.
Hello Ben,
first of all, thanks a lot for Tracks CSS Snippets, it’s so helpfull ! Like your talking here about the logo, i’m wondering if you have a solution to my problem. The above CSS Code works perfectly but i’m just needing to center the logo. Any solution?
Also with this code, Logo and tagline aren’t hidden when mobile menu open. which is kind of disturbing. Could we avoid that by playing with opacity ?
Furthermore, like i didn’t find the forum, how it’s possible to hide meta data ?
Last thing, does it possible to center “verticaly” the tag line ? To try to put the Tagline at same level as the Logo ?
Thanks
