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

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

Home Forums Support Show Desktop-Logo on Tablet / Media Query Breakpoint for Logo only

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #602254
    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?

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #602359
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #602770
    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! ๐Ÿ™‚

    #602911
    Tom
    Lead Developer
    Lead Developer

    Awesome! Glad I could help ๐Ÿ™‚

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.