Smooth header shrinking on navigation bar scroll

13 hours ago, Arjuna said:

Hi all,

https://www.astrologydome.com/

I found this code to shrink the header and logo when you scroll down.

The issue is that the transition when the logo shrinks looks very "choppy." Is it possible to make the transition look more smooth and organic? 

#header .header-title-logo img {
  transition: max-height 300ms ease-in-out
}
#header.shrink {
  .header-announcement-bar-wrapper{
    padding-top: 20px!important;
    padding-bottom: 20px!important;
  }
  .header-title-logo img {
    max-height: 40px;
//  content: url('YOUR LOGO LINK HERE');
  }
}

#header.shrink .header-display-mobile .header-title-logo img {
    max-height: 33px !important;
}

Thank you, all!

Screen Recording 2024-06-16 at 9.57.02 AM.mov 9.28 MB · 7 downloads

Use the following custom css and change the time until it meets your need

.tweak-fixed-header .header .header-announcement-bar-wrapper {
  transition: padding 700ms ease-in-out;
}

#header .header-title-logo img {
  transition: max-height 700ms ease-in-out;
}