Snippets: Custom Logo For Mobile Devices

This will add an extra logo to your header. Make sure to add Custom CSS to your site using Media Queries so you can hide the default logo and display your custom one (notice the default logo has the class 'main-logo' added the image link which you can use to hide it as needed). You can see below we provided the code for your functions.php file and sample code for your CSS, so place them in the correct locations.

// PHP CODE FOR YOUR FUNCTIONS.PHP FILE
function myprefix_custom_mobile_logo() {
	// Get header logo data
	$logo_url   = wpex_header_logo_url();
	$logo_title = wpex_header_logo_title(); ?>
	<a href="<?php echo esc_url( $logo_url ); ?>" title="<?php echo esc_attr( $logo_title ); ?>" rel="home" class="myprefix-mobile-site-logo">
		<img src="YOUR_LOGO_URL" alt="YOUR_LOGO_ALT" data-no-retina />
	</a>
<?php }
add_action( 'wpex_hook_site_logo_inner', 'myprefix_custom_mobile_logo', 99 );

// EXAMPLE CUSTOM CSS
.myprefix-mobile-site-logo { display: none; }

@media only screen and (max-width: 959px) {
   .myprefix-mobile-site-logo { display: block; }
   #site-logo .main-logo { display: none; }
}

Version Required:3.5.1+

Snippet Type: PHP

Posted Under: Logo, Mobile

All PHP snippets should be added via a child theme's functions.php file.