(Squarespace) Large logo in middle of page, when scroll down, move it to top left of header and switch to another logo

Pro Tips Other Tips
1

#1. First, use this code to Code Injection > Footer to add large logo. Remember to change logo image url in the code.
If code doesn’t work, you can comment below, message or email me.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('<img src="https://images.squarespace-cdn.com/content/v1/67a348a140309d756a0718ed/d2de913a-1c0b-4cd6-ba49-591b3ff986de/Accelerate-Growth-White-Logo.png" class="big-logo"/>').appendTo('.homepage div.header-title a');
});
</script>

image
image600×232 62.8 KB

#2. Edit Header

image
image548×172 18.9 KB

Click Edit Design

image
image536×341 52.7 KB

Enable Fixed Position

image
image472×708 71 KB

#3. Use this code to Custom CSS box.

/* Scroll logo */
@media only screen and (min-width: 768px) {
    .homepage {
      .header-title a {
        transform:translate(30vw,20vw) scale(2.9) !important;
        transition: 1s !important;
        pointer-events: none;
        display: grid;
    }
      div.header-title img {
    grid-column-start: 1 !important;
    grid-row-start: 1 !important;
}
.header-title-logo img:not(.big-logo) {
    opacity: 0;
}
   .header.shrink .header-title-logo a {
        transform: translate(0,0) scale(1) !important;
        pointer-events: auto
    }
    .header.shrink .big-logo {
    opacity: 0 !important;
    transition: opacity 0.3s ease 1.0s;
}
.header.shrink img:not(.big-logo) {
    opacity: 1 !important; 
    transition: opacity 0.3s ease 1.0s;
      }}
}

image
image545×963 67.3 KB

Note: The code run on Desktop + Homepage Only

1 Like