[Resolved] Show Desktop-Logo on Tablet / Media Query Breakpoint for Logo only

[Dushan]

I would like to show the desktop-logo on tablet too (but still be using the mobile menu etc). Is there a way to change the media query breakpoint only for the logo?

[Tom]

Hi there,

You might be able to use a function like this:

add_filter( 'generate_mobile_header_logo_output', 'tu_add_secondary_mobile_header_logo' );
function tu_add_secondary_mobile_header_logo() {
	return sprintf(
		'<div class="site-logo mobile-header-logo">
			<a href="%1$s" title="%2$s" rel="home">
				<img class="header-image" src="%3$s" alt="%4$s" />
				<img class="secondary-mobile-header header-image" src="URL TO YOUR TABLET_LOGO" alt="%4$s" />
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		esc_url( apply_filters( 'generate_mobile_header_logo', $settings['mobile_header_logo'] ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
	);
}

Replace the second URL with the URL to the other logo.

Then add this CSS:

@media (min-width: 768px) {
    #mobile-header .header-image:not(.secondary-mobile-header) {
        display: none;
    }
}

@media( max-width: 767px) {
    #mobile-header .secondary-mobile-header {
        display: none;
    }
}

[Dushan]

Hi, great and thank you!

I modified it a bit and this is how it finally works:

add_filter( 'generate_mobile_header_logo_output', 'tu_add_secondary_mobile_header_logo' );
function tu_add_secondary_mobile_header_logo() {
	return sprintf(
		'<div class="site-logo mobile-header-logo">
			<a href="%1$s" title="%2$s" rel="home">
				<img class="standard-header-image header-image" src="STANDARD LOGO URL" alt="%4$s" />
				<img class="secondary-mobile-header header-image" src="MOBILE LOGO URL" alt="%4$s" />
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		esc_url( apply_filters( 'generate_mobile_header_logo', $settings['mobile_header_logo'] ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
	);
}

and CSS:

@media( min-width: 301px) {
    #mobile-header .secondary-mobile-header {
        display: none !important;
    }
		#mobile-header .standard-header-image {
				display: block !important;
		} 
}

@media( max-width: 300px) {
    #mobile-header .secondary-mobile-header {
        display: block;
    }
		#mobile-header .standard-header-image {
				display: none;
		} 
}

Thanks again! 🙂

[Tom]

Awesome! Glad I could help 🙂

[Author]

Posts