Shrink nav bar on scroll 7.1

Hi, 

Im trying to create a shrink nav bar so it starts with a big logo and when the users scrolls it becomes smaller (example https://proto-objects.com/) 

I try using this code: 

#header .header-title-logo img {
  transition: max-height 140ms ease-in-out
}
#header.shrink {
  .header-announcement-bar-wrapper{
    padding-top: 20px!important;
    padding-bottom: 20px!important;
  }
  .header-title-logo img {
    max-height: 40px;
  }
}

Also i tried this one: 

.header.shrink img {
    max-width: 120px;
    transition: all 0.2s ease-in-out
}

.header img {
    transition: all 0.2s ease-in-out
}

Does anyone knows how i can adjust this? Thank you!!

Try this code. If it doesn't work, please share link to your site, we can check easier

header#header img {
	transition: all 0.3s;
}
header#header.shrink img {
	max-height: 30px;
	transition: all 0.3s;
}