skip to Main 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 default logo class so it hides at the mobile breakpoint.
add_filter( 'totaltheme/header/logo/image_class', function( $class ) {
    $class[] = 'hide-at-mm-breakpoint';
    return $class;
} );

// Insert new custom logo image after the default image to display on mobile.
add_filter( 'totaltheme/header/logo', function( $logo_html ) {
    $logo_class = wpex_header_logo_img_class();
    $logo_class = str_replace( 'hide-at-mm-breakpoint', 'show-at-mm-breakpoint', $logo_class ); // switch classes.
    $extra_logo = '<img src="YOUR_SECOND_LOGO_URL" class="' . esc_attr( $logo_class ) .'">';
    return $logo_html . $extra_logo;
} );
All PHP snippets should be added via child theme's functions.php file or via a plugin (we recommend WPCode)
Back To Top