Docs

[giveitlegs]

URL: http://gofitfarm3.wpengine.com

Hey there! I’d love to use a different header logo with the sticky menu after scrolling.

Right now, here’s the code I’m trying to use in my global customizer under the Js section but it’s not working… (I got it from another support thread here in this forum from one of you sharp chaps!)…

/*
// Allows for minimizing sticky header upon scrolling.
*/

jQuery(function($) {
  var $body   = $('body');
  var $navbar = $('.x-navbar');
  if ( $body.hasClass('x-navbar-fixed-top-active') && $navbar.length > 0 ) {
    var boxedClasses = '';
    if ( $body.hasClass('x-boxed-layout-active') ) {
      boxedClasses = ' x-container max width';
    }

    $(window).scroll(function() {
      if ( $(this).scrollTop() >= 60 ) {
        $navbar.addClass('x-navbar-fixed-top' + boxedClasses);
      } else {
        $navbar.removeClass('x-navbar-fixed-top' + boxedClasses);
      }
    });
  }
});

/*
// Sets a different logo for the sticky smaller header after scrolling.
*/

jQuery(function($) {
 $(window).scroll(function() {
   if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
     $('.x-navbar-fixed-top .x-brand img').attr('src','wp-content/uploads/2016/08/Google-Maps-Icon-Fit-Farm-not-Fat-Camp-75x75.png');
   }else{
     $('.x-navbar .x-brand img').attr('src','wp-content/uploads/2016/08/Fit-Farm-Fat-Camp-Hero-Logo-Trans-375x350.png');
   }
 });
});

Any help you can lend would be so appreciated! Cheers…

[Joao]

Hi There,

If you would like to change the logo when scrolling, please add the following code to Appereance : Customizer : Custom : Javascript and switch the images for your own images.

jQuery(function($) {
 $(window).scroll(function() {
   if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
     $('.x-navbar-fixed-top .x-brand img').attr('src','http://placehold.it/120?text=Secondary+Logo!');
   }else{
     $('.x-navbar .x-brand img').attr('src','http://placehold.it/120?text=Original+Logo!');
   }
 });
});

Hope it helps

Joao

[giveitlegs]

Hmm. I added the code, but nothing changed. :/

[John Ezra]

Hi there,

Thanks for updating the thread! Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[giveitlegs]

This reply has been marked as private.

[Nabeel A]

Hi again,

Thank you for providing the credentials. Please replace the previous code with this one:

jQuery(function($) {
 $(window).scroll(function() {
   if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
     $('.logo-menu-item a').css('background','url(http://placehold.it/120?text=Secondary+Logo!)');
   }else{
     $('.logo-menu-item a').css('background','url(http://placehold.it/120?text=Original+Logo!)');
   }
 });
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[giveitlegs]

Hey! That almost got it! Except the smaller logo is repeating right now… hmmm… (screenshot)…

[Rue Nel]

Hello There,

Upon checking, I am already seeing this.

I guess this issue has been resolved. Please confirm.

[giveitlegs]

No, it wasn’t resolved, I just went back to the old code, because I had to give a status update meeting to client, and I didn’t want the logo are looking all wonky… any help you can muster here would be great.

Cheers!

[Nabeel A]

Hi again,

Can you please re-add the previously provided jQuery script and then add the following CSS in your Customizer:

.logo-menu-item a {
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

Let us know how this goes!

[giveitlegs]

Okay, I did that just now. Here was the result… screenshot…

[Paul R]

Hi,

Kindly change the css code to this.

.x-navbar .desktop .x-nav > li.logo-menu-item > a {
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

Hope that helps.

[giveitlegs]

Oooohh! that’s almost it! It just floats left when the sticky header is up… screenshot…

[Thai]

Hi There,

Please update the previous CSS to this:

.x-navbar .desktop .x-nav > li.logo-menu-item > a {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    margin-top: 2px;
}

Hope it helps 🙂

[giveitlegs]

Sir,… that totally did it. Wow. I am in awe. So much amazed. Wow. thank you sooooo much!

You rock! You’re like a CSS demigod…. thnx! really, great support!

Cheers!

[Author]

Posts