[afitz10sParticipant]

Hi Team,

Still loving the Theme!

Wondering if you can help me shrink my logo and header smoothly when I scroll down and then have it go back to normal size smoothly when I scroll back to the top?

I would like to make mine look like this site:

I did find other posts for this, but I haven’t been able to get them to work for my site very well.

Please help if you can! I will leave my credentials in another post.

Thanks in advance for any help!

[afitz10sParticipant]

Here is the url for the example site above: http://www.dartfish.com

[afitz10sParticipant]

This reply has been marked as private.

[LelyModerator]

Hi There,

Thanks you for the credentials.
Please add the following code on Appearance > Customize > Custom > Edit Global JS:

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.x-brand').addClass("resize-logo");
			$('.x-navbar').addClass("resize-navbar");
		} else {
			$('.x-brand').removeClass("resize-logo");
			$('.x-navbar').removeClass("resize-navbar");
		}
	});
});

Also add the following code on Appearance > Customize > Custom > Edit Global CSS:

@media(min-width: 980px){
a.x-brand.img.resize-logo img {
    width: 100px;
    transition: all 100ms linear;
}
a.x-brand.img img {
    width: 200px;
    transition: all 100ms linear;
}
.x-navbar.resize-navbar{
    min-height: 75px;
    transition: all 100ms linear;

	
}
.x-navbar.resize-navbar .desktop .x-nav > li > a {
    height: 70px;
    padding-top: 20px;
      transition: all 100ms linear;
}
}

Feel free to adjust the values on that custom CSS.
See this:http://screencast-o-matic.com/watch/cbneQKQW4N

Hope this helps.

[afitz10sParticipant]

This reply has been marked as private.

[afitz10sParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

Please add the following code to Appereance > Customizer > Header

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

You can add some por top link spacing for the links so they align with the logo on APpereance > Customizer > Header

Hope it helps

Joao

[afitz10sParticipant]

Thanks that did help, but I would still like the header to shrink a bit more.

1. How can I make the header even smaller (not as high)?

2. Also, I changed the linear to “ease” on everything and it helped make the transition smoother, but when I scroll back up the header and nav links still JUMP quickly back to normal. I would like them to ease back just like the logo does…can you help with that?

Thanks in advance!

[afitz10sParticipant]

Last thing is that when I scroll down, the logo and the nav text are not centred when the shrinking happens. How can a center both in the middle?

[Rue NelModerator]

Hello There,

Thanks for updating in! Please have the css code updated and make use of this code instead:

@media (min-width: 980px){
  .x-brand.img.resize-logo {
    margin-top: 5px;
    transition: all 500ms ease;
  }

  a.x-brand.img.resize-logo img {
    width: 105px;
    transition: all 500ms ease;
  }
}

Please always keep in mind that @media css blocks should be added at the very end of other css code. This is the best practice with css.

Hope this helps.

[afitz10sParticipant]

Thanks guys! That helped!

The only issue I am still having is that when I scroll back up, the header SNAPS back large again. I would like it to ease back large again the same way that it shrinks. Can you help with that?

Thanks in advance!

[Rue NelModerator]

Hello There,

Thanks for updating in! You can update the given code and make use of this instead:

@media (min-width: 980px){
  .x-brand.img,
  a.x-brand.img img {
    transition: all 500ms ease;
  }

  .x-brand.img.resize-logo {
    margin-top: 5px;
    transition: all 500ms ease;
  }

  a.x-brand.img.resize-logo img {
    width: 105px;
    transition: all 500ms ease;
  }
}

Hope this helps.

[afitz10sParticipant]

I don’t think I am able to explain what is happening. Everything is smooth (ease) except when I scroll back up. The HEADER snaps back up to large…the transition is not smooth (ease). The logo eases back to large, but not the HEADER…it jumps back quickly…not smooth like it does when you scroll down and it goes smaller. Maybe it’s impossible, but please see this example: wwww.dartfish.com

Thanks for trying!

[ChristopherModerator]

Hi there,

Please add this code as well :

.x-navbar.x-navbar-fixed-top.resize-navbar {
    height: 63px;
}
inspector-stylesheet:1
.x-navbar.x-navbar-fixed-top {
    transition: all 500ms ease !IMPORTANT;
    height: 101px;
}

If you want to apply this style to larger screen add provided code within media query, e.g :

@media (min-width: 980px){
.x-navbar.x-navbar-fixed-top.resize-navbar {
    height: 63px;
}
inspector-stylesheet:1
.x-navbar.x-navbar-fixed-top {
    transition: all 500ms ease !IMPORTANT;
    height: 101px;
}
}

Hope it helps.

[afitz10sParticipant]

Nope sorry. That made the header jump quickly small when scrolling down…so worse. I guess maybe its just not possible…or I’m not explaining the problem well enough. Did you look at the example at wwww.dartfish.com? The resizing is all good, but the header does not go smoothly large again when scrolling back up to the top 🙁

[Author]

Posts