Replace sticky logo

Viewing 5 replies - 1 through 5 (of 5 total)
  • Kharis Sulistiyono

    (@kharisblank)

    9 years, 5 months ago

    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 = 'http://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 http://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

    Thread Starter Mark Aqa

    (@mark-aqa)

    9 years, 5 months ago

    Awesome, thank you!

    Thread Starter Mark Aqa

    (@mark-aqa)

    9 years, 5 months ago

    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 9 years, 5 months ago by Mark Aqa.
    Thread Starter Mark Aqa

    (@mark-aqa)

    9 years, 5 months ago

    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!

    Thread Starter Mark Aqa

    (@mark-aqa)

    9 years, 4 months ago

    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('http://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('http://YOUR STICKY LOGO URL') !important;
    background-size:cover;
    }
}

    – Tested, working on Mozilla, Chrome, Safari.

    • This reply was modified 9 years, 4 months ago by Mark Aqa.
    • This reply was modified 9 years, 4 months ago by Mark Aqa.
    • This reply was modified 9 years, 4 months ago by Mark Aqa.
Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Replace sticky logo’ is closed to new replies.