Jump to content

44degreesnorth

Circle Member
  • Posts

    61
  • Joined

  • Last visited

  • Days Won

    1

Posts posted by 44degreesnorth

  1. 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');
      }
      }}

     

  2. I used the following to get an overlap feature for an image card block in one section to bleed over the edge into the section below it.  You just need to change the #block-yui IDs in each.  Mine was acting a little funny on smaller widths so I added the screen width settings too.  I had this particular section at the "custom" height of 10 (the smallest it'll go), so you may have to tweak the top: 10vh number in the first set of CSS if you have a taller section.

    @media only screen and (min-width: 800px){div#block-yui_3_17_2_1_1593439438559_11782 {
        width: auto !important;
        bottom: -20% !important;
        top: 10vh !important;
        right: 0;
        z-index: 999;
      }}
    
    @media only screen and (max-width: 799px){div#block-yui_3_17_2_1_1593439438559_11782 {
        width: auto !important;
        z-index: 999;
    padding-top: 20px !important;
      }
    .sqs-block-image .design-layout-poster .image-card {
        width: 87%;
      padding-top: 30px !important;
    }
    }

     

    Screen Shot 2020-06-29 at 1.25.33 PM.png

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