Retina logo woes

[genesisnewbie]

Trying to add retina logo (Mindful theme).

I have the logo.png at actual size and the [email protected] at twice the original size, both in uploads and in the images folder. My header looks like this:

/** Custom Logo */

add_theme_support( 'wp_head', 'zp_custom_logo', array(
    'header-selector' => '.site-title a',
    'header-text'     => false,
    'height'          => 95,
    'width'           => 280,
) );

add_action(  'wp_head', 'zp_custom_logo'  );
function zp_custom_logo(  ) {
	if (  genesis_get_option( 'zp_logo', ZP_SETTINGS_FIELD )  ) { ?>
        <style type="text/css">
.header-image .site-header .title-area {
	background-image: url( "<?php echo genesis_get_option( 'zp_logo', ZP_SETTINGS_FIELD ); ?>" );
	background-position: center center;
	background-repeat: no-repeat;
	height: <?php echo genesis_get_option( 'zp_logo_height', ZP_SETTINGS_FIELD );?>px;
	width: <?php echo genesis_get_option( 'zp_logo_width', ZP_SETTINGS_FIELD );?>px;
}
.header-image .title-area, .header-image .site-title, .header-image .site-title a{
	height: <?php echo genesis_get_option( 'zp_logo_height', ZP_SETTINGS_FIELD );?>px;
	width: <?php echo genesis_get_option( 'zp_logo_width', ZP_SETTINGS_FIELD );?>px;	
}
</style>
    <?php }
}

and css like this:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
    .header-image .site-title > a {
        float: left;
        min-height: 95px;
        width: 100%;
        background: url('http://www.mindfulnessperth.com.au/wp-content/uploads/2016/05/logo.png') no-repeat center center !important;
        background-size: 280px 95px !important;
    }
}

the retina is displaying but it's behind (or on top of) the normal logo. How can make the correct logo load on the appropriate device?

http://www.mindfulnessperth.com.au/

[Christoph]

Hi,

I would follow Marcy's great tutorial here: https://amethystwebsitedesign.com/add-retina-logo-to-genesis-or-wordpress-themes/

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[genesisnewbie]

Thanks for the link, but this doesn't with the Mindful theme as there is no 'Header' under 'Appearance'. 🙁

[genesisnewbie]

Got it working as follows:

In functions.php - changed height and width for custom logo:

add_theme_support( 'wp_head', 'zp_custom_logo', array(
    'header-selector' => '.site-title a',
    'header-text'     => false,
    'height'          => 190,  /* 2x actual logo height */
    'width'           => 560, /* 2x actual logo width */
) );

Then added this to custom style sheet:

`

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
.header-image .site-title > a {
float: left;
height: 95px; /*Actual displayed logo height */
width: 280px; /*Actual displayed logo width */
background: url('[email protected]') no-repeat center center!important; /* link to retina logo */
background-size: 280px 95px !important;
}
p.site-title {
max-height: 95px;
}
}

[Author]

Posts