The logo gets uploaded with a retina version, so I imagine it is being displayed fine and this isn’t a retina issue (my logo displays more sharply on retina devices, so I’m pretty sure it’s working). In what way is it distorted? Can you link to a screenshot, or give us a link?
Your logo is too hi-res, I think. The bigger it is, the more you’re relying on the browser to shrink it. This may be what is causing some of the distortion.
Anyway, here’s some code that will show you a different logo on phones. Place it in your functions.php in your child theme (check here if you’ve never done this before):
// Replace logo with a smaller version -- on phones only (767px and below)
add_filter( 'tc_logo_img_display', 'my_logo_img_display' );
function my_logo_img_display($html) {
// For the normal (large) logo, change the "site-logo" class to "hidden-phone site-logo" (using bootstrap class 'hidden-phone')
$normalPattern = '<a class="site-logo"';
$normalReplacement = '<a class="hidden-phone site-logo"';
// For the responsive (small) logo, change the "site-logo" class to "hidden-desktop hidden-tablet site-logo" (using bootstrap classes 'hidden-desktop hidden-tablet')
$respPatterns = array( '<a class="site-logo"',
'YOUR-CURRENT-NORMAL-LOGO.jpg', // substitute with your normal logo's file name; use view source in your browser to find it
'width="200"');
$respReplacements = array( '<a class="hidden-desktop hidden-tablet site-logo"',
'YOUR-SMALLER-THUMBNAIL-LOGO.jpg', // substitute with your smaller logo's file name
'width="80"'); // shrink the logo if you want
// Output the normal logo, followed by a phone-only version. One will always be hidden.
return str_replace($normalPattern, $normalReplacement, $html) . str_replace($respPatterns, $respReplacements, $html);
}
You will need to substitute in the code above for the file names of your logo and its replacement.
If you want to have a different logo for tablets, then you can play around with the placement of the “hidden-tablet” class.
Then add the following to your child theme’s CSS:
.brand.span3 {
min-height: 0;
}
This ensures that your secondary logo (which is another brand/span3) doesn’t shift the navbar down.
Let us know how you get on.
