Jump to content

How to make logo appear on scroll?

Recommended Posts

Site URL: https://offbeat-creemee.squarespace.com/

https://offbeat-creemee.squarespace.com/ pw: offbeat

I'd love to make the logo transition nicely from display:none to display:block on scroll.  I am able to have it appear on scroll, but I can't seem to get it to ease in or out smoothly.  Am I missing something?

Here is the CSS I am using.  The #collection tag is for the homepage, as I want to target only that page with this behavior.

//Replace Your Logo
#collection-60146b8caf27ec7eccad626f{
#header .header-title-logo img {  display: none;
  transition: max-height 140ms ease-in-out
}

#header.shrink {
 .header-title-logo a {
    display: block;
      content: url('https://static1.squarespace.com/static/60146b80af27ec7eccad6125/t/60ba350dc23e1c66c502d1ce/1611951182558/?format=1500w');
  }
  }}

 

Link to comment
  • Replies 1
  • Views 704
  • Created
  • Last Reply

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.