Snippets

Snippet: Custom Logo For Mobile Devices

  • Updated:

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 Code Snippets (100% Free) or WPCode (sponsored)
Back To Top