Skip to content

Snippet: Custom Logo For Mobile Devices

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_SECOND_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_SECOND_LOGO_URL" class="' . esc_attr( $logo_class ) .'">';
    return $logo_html . $mobile_logo;
} );
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