Snippet: Custom Logo For Mobile Devices

  • Updated:
Important: Header Style 5 (centered logo inside the menu) requires different code. Please read through the snippet because you don't need all of it and only copy and modify the code you need. It's also recommended to use the Header Builder for full control over your header design where you can easily create your desktop row and mobile row separately.

This will add an extra logo to your header which will show up at the mobile menu breakpoint while hiding the default logo. This way you can have a different logo for desktop as you do at the mobile menu breakpoint.

/**
 * Modify the default logo so it hides at the mobile breakpoint.
 */
add_filter( 'totaltheme/header/logo/image_class', function( $class ) {
    $class[] = 'hide-at-mm-breakpoint';
    return $class;
} );

/**
 * Insert Mobile Logo.
 *
 * IMPORTANT: You can use this code in Total version 6.4+ (otherwise use the next example).
 */
add_filter( 'totaltheme/header/logo/image', function( $html, $attributes ) {
	if ( ! isset( $attributes['src'] ) ) {
		return $html;
	}
	$attributes['src']   = 'YOUR_MOBILE_LOGO_URL';
	$attributes['class'] = str_replace( 'hide-at-mm-breakpoint', 'show-at-mm-breakpoint', $attributes['class'] );
	$mobile_logo = '<img';
		foreach ( $attributes as $key => $value ) {
			$mobile_logo .= ' ' . $key . '="' . esc_attr( $value ) .'"';
		}
	$mobile_logo .= '>';
	return $html . $mobile_logo;
}, 10, 2 );

/**
 * Insert Mobile Logo. 
 *
 * Example for Total version 6.3 and under.
 */
add_filter( 'totaltheme/header/logo/image', function( $logo_html ) {
    $logo_class = (string) totaltheme_call_static( 'Header\Logo', 'get_image_class' );
    $logo_class = str_replace( 'hide-at-mm-breakpoint', 'show-at-mm-breakpoint', $logo_class ); // switch classes.
    $mobile_logo = '<img src="YOUR_MOBILE_LOGO_URL" class="' . esc_attr( $logo_class ) .'">';
    return $logo_html . $mobile_logo;
} );


/**
 * Header 5 Code
 */

// Modify the header logo image attributes
function my_custom_logo_attrs( $attributes ) {
	$attributes['src']    = 'YOUR_MOBILE_LOGO_URL';
	$attributes['srcset'] = 'YOUR_MOBILE_LOGO_URL 1x, YOUR_RETINA_MOBILE_LOGO_URL 2x'; // optionally define a retina logo
	$attributes['width']  = '100';
	$attributes['height'] = '50';
	return $attributes;
}
add_filter( 'totaltheme/header/logo/image_attributes', 'my_custom_logo_attrs' );

// Don't modify the logo image attributes when the logo is inside the menu
add_action( 'wpex_hook_main_menu_before', function() {
	remove_filter( 'totaltheme/header/logo/image_attributes', 'my_custom_logo_attrs' );
} );
All PHP snippets should be added via child theme's functions.php file or via a plugin.
We recommend Code Snippets (100% Free) or WPCode (sponsored)
Back To Top