Docs

[mathijs84]

Better

Only when you open the page the logo is way to big and when you scroll back up it still doesnt switch back

[Thai]

Hi There,

In this case, 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 login to your site
– WordPress Admin username / Password

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

Thanks.

[mathijs84]

This reply has been marked as private.

[Lely]

Hi There,

Please update the javascript to this:

/*
//header kleiner
*/

jQuery(function($) {
  $(window).scroll(function() {
 var scrollPos = $(window).scrollTop();
   if($(".x-navbar").hasClass("x-navbar-fixed-top") && scrollPos > 100) {
      $(".x-navbar-fixed-top .x-brand img").attr("src","//nvision.work-planning.com/wp-content/uploads/2016/05/32x32.png");
   } else {
      $(".x-navbar-fixed-top .x-brand img").attr("src","//nvision.work-planning.com/wp-content/uploads/2016/05/nVision_red_med_strak.png");
   }
  });
});

Then also add this custom CSS:

.x-navbar.x-navbar-fixed-top .x-brand img {
    width: auto;
    margin-top: 10px;
}

Hope this helps.

[mathijs84]

Please check:

1: If you open the site, the logo is verrrry big. How can i change the size of that?

2: When you scroll down it is good. But if you scroll back up the logo doesnt change back. It does change if you only scroll a little bit. But if you scroll all the way down and back up it doesnt change back???

[Joao]

Hi There,

1- You can use a smaller logo image and your problem will be solved. I have attached one for you. If the size is still big, just edit the image size until you are happy with it.

Upload to your Customizer / Header

then update the image URL on your JQuery Code at Custom / Javascript

2- The navbar re-sizing seems is working perfectly, When you scroll down it gets smaller when you scroll back to the top it get back to the original size. Once you have your original logo size smaller, everything will look great 🙂

Hope that helps,

Joao

[mathijs84]

Thanks a lot. It is way better. I changed the original logo.

Only when you scroll back up, it is still the big logo. I tried changing the image link in the javascript but it gives an error.

[Nabeel A]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-navbar .x-brand img {
    width: 100px !important;
}

Let us know how this goes!

[mathijs84]

Shouldn’t i just change the files somewhere??? In javascript we have the files = -http://nvision.work-planning.com/wp-content/uploads/2016/05/32×32.png for the N

and for the logo http://nvision.work-planning.com/wp-content/uploads/2016/05/nVision_red_med_strak.png
but in the customizer->header i have this file for the logo which is smaller: http://nvision.work-planning.com/wp-content/uploads/2016/05/nVision_red_med_strak-small.png

When i change the javascript code with the smaller logo i get an error.

I added your last code, but now when you scroll down the N is bloated again.

I think it is somewhere in all the code we added.

Also when you initially load the site the logo looks a bit more blurry when you scroll down and up again the logo looks sharp.

We now already have this CSS

.x-navbar .x-brand img {
    width: 100px !important;
}
.x-navbar.x-navbar-fixed-top .x-brand img {
    width: auto;
    margin-top: 10px;
}

.x-navbar .x-brand img,
.x-navbar.x-navbar-fixed-top .x-brand img {
  width: auto; 
  margin-top: 10px;   
}

/*
//header kleiner
*/

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
transition: min-height 0.5s ease;
-webkit-transition: min-height 0.5s ease;
}
.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
    -webkit-transition: height 0.5s ease, padding-top 0.5s ease;
    transition: height 0.5s ease, padding-top 0.5s ease;
}

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: min-height 0.5s ease;
    transition: min-height 0.5s ease;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 60px;
padding-top: 25px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 100px;
margin-top: 0;
}

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
  
  
min-height: 60px;
}

And this Javascript

/*
//header kleiner
*/

jQuery(function($) {
  $(window).scroll(function() {
 var scrollPos = $(window).scrollTop();
   if($(".x-navbar").hasClass("x-navbar-fixed-top") && scrollPos > 100) {
      $(".x-navbar-fixed-top .x-brand img").attr("src","//nvision.work-planning.com/wp-content/uploads/2016/05/32x32.png");
   } else {
      $(".x-navbar-fixed-top .x-brand img").attr("src","//nvision.work-planning.com/wp-content/uploads/2016/05/nVision_red_med_strak.png");
   }
  });
});

Could you please have a good look, because everytime i change 1 thing, the second thing gets out of proportion again.

[Lely]

Hello There,

I’ve remove this custom CSS on your customizer:

.x-navbar .x-brand img {
    width: 100px !important;
}

Then I also update your javascript to use the same logo from your customizer settings. The code is now this:

jQuery(function($) {
  $(window).scroll(function() {
 var scrollPos = $(window).scrollTop();
   if($(".x-navbar").hasClass("x-navbar-fixed-top") && scrollPos > 100) {
      $(".x-navbar-fixed-top .x-brand img").attr("src","//nvision.work-planning.com/wp-content/uploads/2016/05/32x32.png");
   } else {
      $(".x-navbar-fixed-top .x-brand img").attr("src","//nvision.work-planning.com/wp-content/uploads/2016/05/nVision_red_med_strak-small.png");
   }
  });
});

The logo is now changing properly and it is not blurred or stretch anymore. See this:http://screencast-o-matic.com/watch/cDh6ja1POk

Hope this helps.

[Author]

Posts