Replace sticky logo

Hello there,

Thank you for asking.

Indeed, it is possible. To accomplish it, please do the below steps:

1. Install and activate the Header and Footer Scripts plugin
2. Go To Settings > Header and Footer Scripts panel
3. Paste the following code into the provided “Scripts in footer:” box

<script>
jQuery(function($) {

  var newLogo = 'https://yoursite.com/path/to/image.jpg';
  var oldLogo = $('.site-logo').attr('src');
  var headerFix = $('.site-header').offset().top;
  
  $(window).on('load scroll', function() {
    var y = $(this).scrollTop();
    if ( y >= 107 ) {
      $('.site-logo').attr('src',newLogo);
    } else {
      $('.site-logo').attr('src',oldLogo);
    }
  });

});
</script>

Replace https://yoursite.com/path/to/image.jpg to your logo image path URL. You would upload it to media library (Dashboard > Media > Add New).

4. Save settings

Regards,
Kharis

Awesome, thank you!

Sorry, just tested and it’s not working..

(could not provide website link – I’m on maitenance mode)

I tried to disable other plugins, removed custom css, so theme stays ,,clean,, but no effect..

I tried to add custom css with ,,@media only screen and… etc,,

background-image: url(“LOGO-IMAGE-URL”) !important;
background-size:cover;

new logo comes up, but the problem is, that sticky is showing both logos – 1st logo is in front and 2nd is as its background. Is it possible to do it that way? But how to hide the front logo..?

Thank You!

• This reply was modified 7 years, 11 months ago by Mark Aqa.

OK, if some one has same problem, I found a topic on: https://athemes.com/forums/topic/change-mobile-logo/

and it’s working! If you want to show different logo on iPads horizontaly, just change ,,768,, to ,,1024,,.

Thank you!

With Header and Footer Scripts it is working, but unfortunately when you click on sticky logo main logo comes up..

but I found a simple way, how to get different logo on small screen:

1) create a blank, transparent png logo and upload it to ,,Site title/tagline/logo,,

2) main logo: go to Custom CSS and add:

.site-logo {
    background-image: url('https://YOUR MAIN LOGO URL') !important;
    background-size:cover;
}

3) 2nd logo for small screen add:

@media only screen and (max-width: 1024px) {
    .site-logo {
    background-image: url('https://YOUR STICKY LOGO URL') !important;
    background-size:cover;
    }
}

– Tested, working on Mozilla, Chrome, Safari.

• This reply was modified 7 years, 10 months ago by Mark Aqa.
• This reply was modified 7 years, 10 months ago by Mark Aqa.
• This reply was modified 7 years, 10 months ago by Mark Aqa.