Display logo based on device? (4 posts)

  1. derekbelcher
    Posted 2 years ago #

    Is there a function / css snippet to show different versions of a logo based on the device where the page is being viewed. For example, my logo looks great on a desk top PC, but is distorted on an iPad, presumably because of the responsive design. Can I have three different images in the library and code that pulls the right one based on the device?


  2. somedudes
    Posted 2 years ago #

    Hi there.

    You should use retina media queries for that to happen. Here's link for the head start


  3. derekbelcher
    Posted 2 years ago #

    So is this a case of my image (logo) not being hi-res enough? It is a 2701 x 544 png file. Sorry, I'm just starting to get my feet wet in the multiple displays realm and responsive designs, etc.

  4. ElectricFeet
    Posted 2 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic