How to replace logo on tablets/mobile on responsive template...

[toomanyknots]

Hello. I want to replace my websites logo with a different image on tablets/mobile. I can figure out how to hide it using this code:

@media (max-width: 730px) { 
	#logo {display: none;}	
}

I am just wondering what I could do to replace the logo with a different image around that same pixel width. I have tried this no to no avail:

@media (max-width: 730px) { 
	#logo {background-image: url("image url");}	
}

[keneso]

Have you tried removing the logo details from includes/languages/english/YOUR_TEMPLATE/header.php, and then put different backgrounds based on media?

[ultimate_zc]

All you are doing with the css is adding a background to the logo. Like keneso says, you have to remove the logo in order for that css to work. If you want to remove it from mobile devices, I would suggest adding a copy of mobiledetect to your includes/functions/extra_functions folder, make a copy of includes/languages/english/header.php and add it to your current folder as in includes/languages/english/YOUR_CURRENT_THEME/header.php.

Add this after line 9

$detect = new Mobile_Detect; 

Replace lines 23 to 25

  define('HEADER_LOGO_WIDTH', '192px');
  define('HEADER_LOGO_HEIGHT', '64px');
  define('HEADER_LOGO_IMAGE', 'logo.gif'); 

with

if ( $detect->isMobile() ) {
     define('HEADER_LOGO_WIDTH', '?px');
     define('HEADER_LOGO_HEIGHT', '?px');
     define('HEADER_LOGO_IMAGE', 'new_logo');
} else {
     define('HEADER_LOGO_WIDTH', '192px');
     define('HEADER_LOGO_HEIGHT', '64px');
     define('HEADER_LOGO_IMAGE', 'logo.gif');
} 

Change new_logo and ?px with your new image and dimensions for it.

[Pauls]

Hi fantastic that you have created such a addon for the zencart product, it is superb, I will very shortly be making a donation.

I don't know whether this is a problem for me only but the 'home' 'search' and shopping cart' buttons do not appear instead I get what looks like place holders for the options, could you offer a solution?

Thanks again.