Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Version 7.0 - Shrink logo on scroll


znx

Question

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

5 answers to this question

Recommended Posts

  • 1

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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

Create an account or sign in to comment

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

×
×
  • Create New...