Swap logo in nav bar on scroll issue

[logoglo]

Hi, see here:

Diseño Gráfico Accesible - Monocromo

I have this java:

jQuery(function($){
  $(window).scroll(function(){
  if ( $(this).scrollTop() ==0) {
$('.x-navbar').removeClass('x-navbar-fixed-top');
   }
      if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
$('.x-topbar').addClass('x-topbar-fixed-top');
      }else {
$('.x-topbar').removeClass('x-topbar-fixed-top');
}
  });
});

jQuery(function($) {
 $(window).scroll(function() {
   if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
     $('.x-navbar-fixed-top .x-brand img').attr('src','http://www.monocromo.design/wp-content/uploads/2016/09/disenograficobarato.png');
   }else{
     $('.x-navbar .x-brand img').attr('src','http://www.monocromo.design/wp-content/uploads/2020/04/disenograficobarato2.png');
   }
 });
});

And this css:

@media(min-width: 400px) {
.home .masthead  {
            position:absolute;
            width:100%;            
       }

.home .x-topbar,
.home .x-navbar {
   background-color:transparent;
} 

.home .x-navbar .desktop .x-nav > li > a {
      color:#fff;  
}

.home .x-topbar,
.home .x-topbar a {
   color:#fff;
}


.home .x-navbar .desktop .x-nav > li > a:hover, 
.home .x-navbar .desktop .x-nav > .current-menu-item > a,
{
    color: #4682b4 !important;
 }

.home .x-topbar.x-topbar-fixed-top,
.home .x-navbar.x-navbar-fixed-top {
    background:#fff;
}

.home .x-topbar.x-topbar-fixed-top,
.home .x-topbar.x-topbar-fixed-top a {
   color:#000;
}

.home .x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
   color:#000;  
}

.home .x-navbar.x-navbar-fixed-top .x-navbar-inner {
     z-index: 99999;
    top: 0px;
    position: fixed;
    clear: both;   
    width: 100%;
    background-color: #fff;
}
}
.scroll-nav a.x-brand {
    width: 250px;
    height: 105px;
    display: block;
    background-image: url(http://www.monocromo.design/wp-content/uploads/2020/04/disenograficobarato2.png);
    background-size: cover;
}

.scroll-nav a.x-brand img {
    display: none;
}

It kind of works, but on 1st load, the logo is still black, it only works when you scroll down and back up…I want it to be like this (ie white) on 1st load.

Thanks.

[friech]

Hi @logoglo,

Thank you for writing in, but your code works fine, I tested it on my end. The only thing I notice on your site is you did not set your Navbar as Fixed Top, that is the option that triggers the x-navbar-fixed-top class, so you need to set that option in order for your code to work.

• 
  
  
  

Please do note that we do not provide support for customization. You might want to consider upgrading to PRO as you can easily achieve that effect on PRO, and on top of that, the WP (4.8.2), X theme (4.6.2) and Cornerstone (1.3.2) you have on that site are outdated. (You can refer for the latest supported versions here)

Updating WordPress
How to Perform a Manual Update

Remember to clear all your caching features (plugin, server-side, CDN, and browser’s cache) after updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Thanks,

[logoglo]

Hmm, something isnt right…so 1st of all, it is set to fixed top:

And cornerstone is up to date:

And the theme is up to date:

You say you tested the code, and its not doing this?

Thanks.

[logoglo]

I transferred it to a fresh install, everything up to date etc…

http://garyrobinson.kinsta.cloud/

I got it working, it was to do with which logo you set in the customizer as the logo…I had it the wrong way around…

Quick question though, how do I make it act the same on a mobile? so keep the nav bar visible, at the moment it goes away on scroll…fixed I guess, where as the desktop shows…

Thanks.

[friech]

Hi @logoglo,

Yes, a position: fixed;, can make your header on mobile fixed on top, however, it’s not enough to complete the effect that you want to achieve, and it might cause you more trouble than good, regretfully we are unable to provide customizations as it is outside of our support scope.

If you are more interested in having control over all aspects of the header I suggest that you consider the Pro theme which has a Header and Footer builder and you can use various elements to create a footer.

Kindly check the Elements section of our documentation to learn more on which elements you can use on Pro Header/Footer builders.

Thanks,