Jump to content

Shrink header branding on scroll 7.0

Recommended Posts

  • Replies 7
  • Views 677
  • Created
  • Last Reply
On 5/31/2021 at 9:35 AM, c_rissy said:

@tuanphan

Yes please! I want to resize the KANTO on scroll. Thanks!

Add 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.Header--bottom').addClass('tsticky');
        }
        else {
            $('header.Header.Header--bottom').removeClass('tsticky');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  .tsticky .Header-branding {
    font-size: 50px !important;
}
</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
16 hours ago, c_rissy said:

@tuanphanyes! I am still working on building out the site and playing around with elements but haven't gotten to media queries yet 🙂

Add to Design > Custom CSS

/* Tablet-Yas yus yes */
@media screen and (max-width:991px) and (min-width:768px) {
div#block-60b80924d3d23935476bdc85 h1 {
    font-size: 50px;
}
}

 

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.