Home>Support>We want to change out our logo only on our home page… and do it for normal & retina variants

We want to change out our logo only on our home page… and do it for normal & retina variants

We have the paid version of the Vantage theme.

We have a light navigation header on our home page and a dark navigation header everywhere else, and we are showing the logo in our menu.

We would like to (on the home page only) show a different image for our logo, and we want to be able to have this work for both the normal & retina variants. Right now we are using some extremely hacky CSS to accomplish the swap at runtime, but I’m sure there’s a better PHP way to do this.

.home header#masthead.masthead-logo-in-menu .logo > *  {
	display: block !important;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
	background: url(http://example.com/ourlogo.png) no-repeat !important;
	width: 100px !important; /* Width of new image */
	height: 35px !important; /* Height of new image */
	padding-left: 100px !important; /* Equal to width of new image */
}

Please advise how we can do this. I’m assuming somehow through functions.php?

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 4 months ago Andrew Misplon Hi, I Work Here

    Hi Jensen

    Here is a snippet Greg put together now. Place in the functions.php of your child theme:

    function vantage_child_change_logo($value){
    if( is_front_page() ) {
    $value = 1733;
    }
    
    return $value;
    }
    add_filter('siteorigin_setting_logo_image', 'vantage_child_change_logo');
    
    function vantage_child_change_retina_logo($value){
    if( is_front_page() ) {
    $value = 1734;
    }
    
    return $value;
    }
    add_filter('siteorigin_setting_logo_image_retina', 'vantage_child_change_logo');
    

    Those IDs are the attachment IDs for the alternative logos.

    Let us know how it goes.

  2. 7 years, 4 months ago josquin

    Thank you very much!

    The code has a bug so does not work as written above, but I fixed the bug (correcting the second add_filter statement) and now it works right.

    For posterity, here is the corrected code:

    <?php
     
    function vantage_child_change_logo($value){
    if( is_front_page() ) {
    	$value = 763;
    }
    
    return $value;
    }
    add_filter('siteorigin_setting_logo_image', 'vantage_child_change_logo');
    
    function vantage_child_change_retina_logo($value){
    if( is_front_page() ) {
    	$value = 766;
    }
    
    return $value;
    }
    add_filter('siteorigin_setting_logo_image_retina', 'vantage_child_change_retina_logo');
    
    ?>
    

    One question, with this solution on retina displays, you can see the logo displaying first the non-retina asset and then later changing to the retina asset. Is this visual glitch avoidable?

    Again, thanks a lot!

  3. 7 years, 4 months ago Andrew Misplon Hi, I Work Here

    Ahh yes I see. Thanks for correcting. Can you send through a link to this being used and I’ll check that loading?

  4. 7 years, 4 months ago josquin

    Sure, you can see it here: http://tinyurl.com/n9wr2cy

    (the site is up and down)

    The much bigger problem we are having is that the logo does not stay flush with the left column as the browser is resized down.

    For instance, look at this page: http://tinyurl.com/ocw9bqo

    As you resize the browser down, the logo remains aligned with the body text… but then eventually as the browser gets smaller it keeps moving left until it hit the left edge of the browser. And then it jumps right to a weird point between the edge of the browser and the left edge of the body text.

    We are just trying to make it always align with the body text below it, but we are totally stuck.

    Thanks for any help! :)

  5. 7 years, 4 months ago Andrew Misplon Hi, I Work Here

    The Retina logo does seem to load right away for me. To look at the logo alignment you could try the following under Appearance > Custom CSS and adjust both the breakpoint and the margin as required:

    @media screen and (max-width: 1180px) {
    
    body.responsive header#masthead.masthead-logo-in-menu .logo {
    margin-left: 20px;
    }
    
    }
    
  6. 7 years, 4 months ago josquin

    Thanks for that suggestion! I have updated out site, and while that does change the behavior of the logo somewhat, it still has a weird “jump to the right” as you resize the browser downward.

    This is easiest to see on a page like this: http://tinyurl.com/ocw9bqo.

    Keep downsizing the browser horizontally, and watch the logo. It goes left, left, left, then jumps right, and then goes left again.

    It appears that the left-margin of the full-container in the menu decreases below 35px (which is the minimum of the full-container in the body), and then once it hits 0, it jumps to inherit, which sets it back to 35px.

    I am mystified.

  7. 7 years, 4 months ago Andrew Misplon Hi, I Work Here

    I can appreciate the desire to make this perfect, really can, but users don’t ordinarily re-size browser, they’ll load it up at their devices resolution and perhaps change orientation.

    Here is another site running the logo in menu option: http://hitdelete.com/. The mobile breakpoint is set quite early. There is no logo jump while down-sizing that I can see. So perhaps that’s an option.

  8. 5 years, 2 months ago Luigi Chiacchio

    Hi, I have tried to use this snippet into my function.php, but I didn’t understand in wich mode I have to use the IDs. My theme is the premium and the original (no child). I have tried to use the css but doesn’t work. Can you help me?

  9. 5 years, 2 months ago Andrew Misplon Hi, I Work Here

    Hi Luigi

    A quick reminder that all themes overwrite during theme updates so it’s important to not make any changes to theme files directly as those changes will be lost during the theme update process. A child theme should be used or a plugin like Code Snippets.

    Unfortunately, we’re no longer able to offer this level of custom development support. If you need quick developer assistance we highly recommend the team at Codeable.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More