Version 7.0 - Shrink logo on scroll

Site URL: https://znbh.co

I'm trying to make my logo shrink on scroll using custom code, but nothing I am doing seems to be working. Here is what I have so far, gathered and altered based on what I've seen from other posts similar to my own:

<script>
//Shrink Your Logo
.title-nav-wrapper .site-title img {
    transition: max-height 140ms ease-in-out
}
.title-nav-wrapper.shrink {
  padding-top: 20px!important;
  padding-bottom: 20px!important;
.site-title img {
    max-height: 40px;
}
}
</script>

what's wrong with this? why won't it work on my site?

Thank you so much! That worked like a charm!

@tuanphan this code works great! Is it possible to add a transition for the shrink, so it is not so abrupt?

My site is: https://aquastore.squarespace.com/ password: letstalk

23 hours ago, samantha4 said:

@tuanphan this code works great! Is it possible to add a transition for the shrink, so it is not so abrupt?

 

My site is: https://aquastore.squarespace.com/ password: letstalk

add this to Code Injection > Header

<style>
img.Header-branding-logo {
    transition: all 0.9s;
}
.tsticky img {
    transition: all 0.9s;
}
</style>

On 9/16/2021 at 8:56 AM, tuanphan said:

add this to Code Injection > Header

<style>
img.Header-branding-logo {
    transition: all 0.9s;
}
.tsticky img {
    transition: all 0.9s;
}
</style>

 

Hi there! Thanks for the input - but this didn't seem to solve this issue. Could I possibly have something else interfering with the code? Thanks for all the help!

Hi @tuanphan

Slightly different request. I have a silhouette image with text above it. I would like the image and text to start of large (As per attached), and then get much smaller on scroll. How would i do this? This is in open section, not header as per above messages. Thanks

21 hours ago, Jonesluke25 said:

Hi @tuanphan

Slightly different request. I have a silhouette image with text above it. I would like the image and text to start of large (As per attached), and then get much smaller on scroll. How would i do this? This is in open section, not header as per above messages. Thanks

When scroll down, they will be smaller 

or

 they will be smaller + move to header logo position?

Hi @tuanphan,

It would be great to know how I do both those options. There are points when i just want the image/text to get smaller on scroll, and places where I would like the text/image to move to the header logo position to show which section you are on.

Thanks,

Luke

@tuanphan,

I’ve been trying to work out the CSS for the above. Although I can’t get it to work. Any help would be really appreciated.

I would like :

1). image/text in section to get smaller on scroll

Thank you!

Luke 

On 6/26/2023 at 5:16 PM, Jonesluke25 said:

Hi @tuanphan,

It would be great to know how I do both those options. There are points when i just want the image/text to get smaller on scroll, and places where I would like the text/image to move to the header logo position to show which section you are on.

Thanks,

Luke

Can you share your site url?

Hi @tuanphan

https://plantain-flamingo-6dkr.squarespace.com/

Password: july

Don't remove any code in your current code in Code Injection

Add this code to Design > Custom CSS

.header-sticky + #page div#block-44c31c184d6bdb79890c {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 50px;
    transition: all 0.3s ease;
}

div#block-44c31c184d6bdb79890c {
    transition: all 0.3s ease;
}

Hi @tuanphan

I'd love some help with this! I really want my logo to sit large in the centre of the screen (full width) on the home page on first load. Then once you scroll down, I want the logo to shrink back into its regular position in the header. I also only want this to occur only on desktop view. On mobile I just want the logo to sit in its regular position in the header from first load. Is this possible?

prime-placements.squarespace.com

password: prime2023

I've almost got it to where I want it, but it's still not quite right. The transition is not smooth and the logo shrinks to a different position on scroll depending on the screen size.

Thank you in advance!