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;
}

@tuanphan is there an easy way to make a specific block or text get smaller with scroll. I want an image to start larger and get smaller when people scroll down a section. Thanks,

Luke

20 hours ago, Jonesluke25 said:

@tuanphan is there an easy way to make a specific block or text get smaller with scroll. I want an image to start larger and get smaller when people scroll down a section. Thanks,

Luke

Not an easy way, you will need to use Script code, a bit complex

If you share link to page where you use text or image, we can test some code

Hi Tuanphan,

Website: polygon-rhombus-lyxx.squarespace.com

Password: August

Thanks so much, I really appreciate the help. I would like all the black illustrations on the homepage to start bigger and get smaller if possible.

Also, In addition to this is there some code to make the section title of each section go to the centre of the navigation bar where people would traditionally have their logo... I want people to know what section they are on because I intend to have lots of content/sections on the homepage (Section titles: Reimagined, ReDiscover, Experience)

Thanks,

Luke