Jump to content

Best practice for 7.1 header shrink transition delay

Recommended Posts

Wondering if anyone, perhaps the ever helpful @tuanphan has a rock solid, best practice for customizing the transition-delay for the sticky header in 7.1 on shrink?

For the homepage only, I'd like to delay the transition for the .shrink class for this site such that the header doesn't show it's background (which is invoked upon shrink) until the site is scrolled past the point at which the centered logo "How God Works" isn't viewable anymore in that first section:


Pwd: Letmein

I'm guessing it may involve more than custom CSS (some sort of javascript) since the depth of scroll will be different at different view heights?

The code I've tried, but hasn't seemed to have any effect thus far is:

.homepage .header .header-announcement-bar-wrapper {
  transition-delay: 8s !important;

.homepage .header.shrink .header-announcement-bar-wrapper {
  transition-duration: 4s !important;

I've already tried searching for answers and have found some that are close, but nothing definitive about how to consistently delay the header transition and nothing about what I'd like to do specifically.

Thanks in advance for any advice/answers,


Addendum: For now I've simply hidden the "How God Works..." graphic on scroll with a bit of jQuery, but I'm still very interested in how to delay the .shrink transition.

Edited by mferrini
Added some clarification and fixed a typo and the title
Link to comment
  • mferrini changed the title to Best practice for 7.1 header shrink transition delay
  • Replies 12
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 month later...
  • 1 month later...
  • 2 months later...

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.