Jump to content

Version 7.0 - Shrink logo on scroll

Go to solution Solved by tuanphan,

Recommended Posts

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?

Link to comment
  • Solution

Hi. Your template doesn't have "shrink" class name when scrolling. You need to use JS code to add this class.

Add this to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
 var visibleTop = 30;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header#header').addClass('header-sticky');
        }
        else {
            $('header#header').removeClass('header-sticky');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  header#header img {
    transition: all 0.3s;
}
  header#header.header-sticky img {
    max-height: 50px;
    transition: all 0.3s;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Susana_SQSP changed the title to Version 7.0 - Shrink logo on scroll
  • 2 months later...
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!

Link to comment
  • 1 year later...

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

 

Edited by Jonesluke25
Link to comment
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

Screenshot 2023-06-22 at 12.08.14.png

When scroll down, they will be smaller 

or

 they will be smaller + move to header logo position?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Edited by Jonesluke25
Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.