Jump to content

Recommended Posts

8 hours ago, JasminMoraStudio said:

Hi there

I'm looking for a way to shrink the logo on scroll on the homepage. The logo should go from the middle of the page to the middle of the header navigation. I only want this effect on the home page when users initially visit the site. 

Similar effects:
https://lowtide.co/ 
https://www.byondesign.com/global/

 

My website: www.eden-moments.ch
PW: EdenMoments

Screenshot 2024-05-22 at 16.08.44.png

Screenshot 2024-05-22 at 16.09.00.png

Can you turn on the fixed position for the header so my demo code can work on it?

image.thumb.png.3ff6a515099c3f8bc4902f8925de9c15.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
41 minutes ago, JasminMoraStudio said:

@Beyondspace I just noticed my examples both have a fixed header. I actually don’t want it to be fixed to the top like in the examples. Just that first shrink on scroll. 

The fixed position setting makes the effect work (scroll down and header will have a additional class: shrink. We use this class to set the appropriate style.

You can turn it on and we 'll find the way to disable it via CSS code

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 5/22/2024 at 4:20 PM, JasminMoraStudio said:

Hi there

I'm looking for a way to shrink the logo on scroll on the homepage. The logo should go from the middle of the page to the middle of the header navigation. I only want this effect on the home page when users initially visit the site. 

Similar effects:
https://lowtide.co/ 
https://www.byondesign.com/global/

 

My website: www.eden-moments.ch
PW: EdenMoments

Screenshot 2024-05-22 at 16.08.44.png

Screenshot 2024-05-22 at 16.09.00.png

@tuanphan I've seen some of your code on the forum for similar issues but haven't been able to make it work for my page. Do you think you could help? I am looking to shrink the logo on scroll but not to keep the header fixed. 

Link to comment
On 6/4/2024 at 4:34 AM, JasminMoraStudio said:

@tuanphan I've seen some of your code on the forum for similar issues but haven't been able to make it work for my page. Do you think you could help? I am looking to shrink the logo on scroll but not to keep the header fixed. 

You can use this to Website > Website Tools > Custom CSS.

body.homepage .header-title {
    position: absolute;
    width: 100%;
    transition: 2s ease !important;
    left: 50%;
    transform: translate(-50%,-50%);
    top: 77vh;
}
body.homepage header#header.shrink .header-title {
    width: 15% !important;
    left: 50%;
    top: 2.3vh;
    text-align: left;
}
body.homepage .header-title img {
    width: 100% !important;
    max-height: 400px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 6/6/2024 at 5:42 AM, tuanphan said:

You can use this to Website > Website Tools > Custom CSS.

body.homepage .header-title {
    position: absolute;
    width: 100%;
    transition: 2s ease !important;
    left: 50%;
    transform: translate(-50%,-50%);
    top: 77vh;
}
body.homepage header#header.shrink .header-title {
    width: 15% !important;
    left: 50%;
    top: 2.3vh;
    text-align: left;
}
body.homepage .header-title img {
    width: 100% !important;
    max-height: 400px;
}

 

Thanks a lot! This is already looking so much better. However I haven't been able to make it work on a non fixed header. Is this possible as well? What would I have to adjust? 

Link to comment
On 6/11/2024 at 2:18 AM, JasminMoraStudio said:

Thanks a lot! This is already looking so much better. However I haven't been able to make it work on a non fixed header. Is this possible as well? What would I have to adjust? 

You mean you want to disable Fixed Header option & still want this code work?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.