Snippets: 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( 'wpex_header_logo_img_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( 'wpex_header_logo_img_html', 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;
} );

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 or via the Code Snippets Plugin (or alternative plugin)