ievavi Posted January 31, 2021 Share Posted January 31, 2021 Site URL: https://www.ievaviphoto.com Hello, there! I'm trying to achieve a similar result to one in the example (parallax footer / slide out footer upon scroll). May anyone would be able to give a hand? Example: https://yatesdesign.com.au/divi-tutorial-reveal-footer-scroll/ My site: www.ievaviphoto.com Thank you! Link to comment
Beyondspace Posted February 1, 2021 Share Posted February 1, 2021 1 hour ago, ievavi said: Site URL: https://www.ievaviphoto.com Hello, there! I'm trying to achieve a similar result to one in the example (parallax footer / slide out footer upon scroll). May anyone would be able to give a hand? Example: https://yatesdesign.com.au/divi-tutorial-reveal-footer-scroll/ My site: www.ievaviphoto.com Thank you! Could you try this @media only screen and ( min-width: 640px ) and ( max-width: 768px ) { .Site { margin-bottom: 505px; /*This may to be adjusted depending on the content of your footer*/ } .Footer { position: fixed; z-index: -1; height: 505px; /*This may to be adjusted depending on the content of your footer*/ width: 100%; bottom: 0; } .Footer-inner { position: fixed; width: 100%; bottom: 0; padding: 10px 0; } } @media only screen and ( min-width: 768px ) { .Site { margin-bottom: 605px; /*This may to be adjusted depending on the content of your footer*/ } .Footer { position: fixed; z-index: -1; height: 605px; /*This may to be adjusted depending on the content of your footer*/ width: 100%; bottom: 0; } .Footer-inner { position: fixed; width: 100%; bottom: 0; padding: 10px 0; } } ievavi 1 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
ievavi Posted February 1, 2021 Author Share Posted February 1, 2021 6 hours ago, bangank36 said: Could you try this @media only screen and ( min-width: 640px ) and ( max-width: 768px ) { .Site { margin-bottom: 505px; /*This may to be adjusted depending on the content of your footer*/ } .Footer { position: fixed; z-index: -1; height: 505px; /*This may to be adjusted depending on the content of your footer*/ width: 100%; bottom: 0; } .Footer-inner { position: fixed; width: 100%; bottom: 0; padding: 10px 0; } } @media only screen and ( min-width: 768px ) { .Site { margin-bottom: 605px; /*This may to be adjusted depending on the content of your footer*/ } .Footer { position: fixed; z-index: -1; height: 605px; /*This may to be adjusted depending on the content of your footer*/ width: 100%; bottom: 0; } .Footer-inner { position: fixed; width: 100%; bottom: 0; padding: 10px 0; } } Ba! You are amazing! Thanks so much!! I will keep this post up since I saw other people were looking for a solution 🙂 Best, Ieva Beyondspace 1 Link to comment
Beyondspace Posted February 1, 2021 Share Posted February 1, 2021 36 minutes ago, ievavi said: Ba! You are amazing! Thanks so much!! I will keep this post up since I saw other people were looking for a solution 🙂 Best, Ieva you're great! Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
CIW Posted February 16, 2021 Share Posted February 16, 2021 Where do I put this code? Thanks! Link to comment
tuanphan Posted February 18, 2021 Share Posted February 18, 2021 On 2/16/2021 at 10:33 AM, CIW said: Where do I put this code? Thanks! Add to Design > Custom CSS Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
e_robertson Posted March 11, 2021 Share Posted March 11, 2021 @bangank36 Hello! I was wondering if you can tell me why this code isn't working on my site? https://www.erobertson.design/ I'm using the Jasper (York) template and trying to achieve the same effect. Any pointers would be appreciated. Beyondspace 1 Link to comment
Beyondspace Posted March 12, 2021 Share Posted March 12, 2021 5 hours ago, e_robertson said: @bangank36 Hello! I was wondering if you can tell me why this code isn't working on my site? https://www.erobertson.design/ I'm using the Jasper (York) template and trying to achieve the same effect. Any pointers would be appreciated. try #page { margin-bottom: 255px; /*This may to be adjusted depending on the content of your footer*/ } #footer { position: fixed; z-index: -1; height: 225px; /*This may to be adjusted depending on the content of your footer*/ width: 100%; bottom: 0; } e_robertson 1 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
e_robertson Posted March 12, 2021 Share Posted March 12, 2021 @bangank36 Thank you so much – that's worked a treat! Any pointers for how I should adjust this code for mobile? Do you also know if it's possible to prevent the footer from appearing until the user has scrolled all the way to the bottom of the page? It currently appears as the user approaches the bottom, rather than when the reach the bottom. Link to comment
tuanphan Posted March 23, 2021 Share Posted March 23, 2021 On 3/12/2021 at 6:02 PM, e_robertson said: @bangank36 Thank you so much – that's worked a treat! Any pointers for how I should adjust this code for mobile? Do you also know if it's possible to prevent the footer from appearing until the user has scrolled all the way to the bottom of the page? It currently appears as the user approaches the bottom, rather than when the reach the bottom. Hi. Do you still need help on this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
e_robertson Posted March 23, 2021 Share Posted March 23, 2021 20 minutes ago, tuanphan said: Hi. Do you still need help on this? No, but thank you for asking. I fixed the desktop issues by adjusting the #page margin-bottom and the #footer height, and I decided not to have the effect on mobile. On desktop, the footer appears for a short flicker when the page loads, before disappearing. I have attached a screenshot. Do you know if I can prevent this, or just have to live with it? Beyondspace 1 Link to comment
sumcwan Posted May 16, 2021 Share Posted May 16, 2021 Hello @bangank36, I'm trying to achieve the same effect on my page, however it's not working. I tried adjusting the margin too. Can you help please? https://flower-springtail-8n3z.squarespace.com/ (password: tothemoon) On 2/1/2021 at 8:53 AM, bangank36 said: Could you try this @media only screen and ( min-width: 640px ) and ( max-width: 768px ) { .Site { margin-bottom: 505px; /*This may to be adjusted depending on the content of your footer*/ } .Footer { position: fixed; z-index: -1; height: 505px; /*This may to be adjusted depending on the content of your footer*/ width: 100%; bottom: 0; } .Footer-inner { position: fixed; width: 100%; bottom: 0; padding: 10px 0; } } @media only screen and ( min-width: 768px ) { .Site { margin-bottom: 605px; /*This may to be adjusted depending on the content of your footer*/ } .Footer { position: fixed; z-index: -1; height: 605px; /*This may to be adjusted depending on the content of your footer*/ width: 100%; bottom: 0; } .Footer-inner { position: fixed; width: 100%; bottom: 0; padding: 10px 0; } } Link to comment
tuanphan Posted May 18, 2021 Share Posted May 18, 2021 @sumcwan above code for SS 7.0, try change some class to this new code @media only screen and ( min-width: 768px ) { #page { margin-bottom: 605px; /*This may to be adjusted depending on the content of your footer*/ } footer.sections { position: fixed; height: 605px; /*This may to be adjusted depending on the content of your footer*/ width: 100%; bottom: 0; } } sumcwan 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
sumcwan Posted May 18, 2021 Share Posted May 18, 2021 This is perfect! Thank you @tuanphan! Link to comment
DolceCotti Posted August 10, 2021 Share Posted August 10, 2021 Hello, the code posted worked like a charm but I was wondering if there is a way to put a small shadow on the top of the footer so it really appears as "behind". Thanks. Link to comment
tuanphan Posted August 12, 2021 Share Posted August 12, 2021 On 8/11/2021 at 12:59 AM, DolceCotti said: Hello, the code posted worked like a charm but I was wondering if there is a way to put a small shadow on the top of the footer so it really appears as "behind". Thanks. Hi. Can you share link to your site? We can tweak the code easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
DolceCotti Posted August 12, 2021 Share Posted August 12, 2021 7 hours ago, tuanphan said: Hi. Can you share link to your site? We can tweak the code easier Yes, it's private at the moment, password should work.https://www.dolcecotti.com/ Password: Test1234 Link to comment
tuanphan Posted August 14, 2021 Share Posted August 14, 2021 On 8/12/2021 at 11:03 PM, DolceCotti said: Yes, it's private at the moment, password should work.https://www.dolcecotti.com/ Password: Test1234 Hi. Try this code footer#footer-sections { box-shadow: 0px 0px 15px rgb(0 0 0 / 50%); } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
DolceCotti Posted August 14, 2021 Share Posted August 14, 2021 1 hour ago, tuanphan said: Hi. Try this code footer#footer-sections { box-shadow: 0px 0px 15px rgb(0 0 0 / 50%); } Thank you for your help, unfortunately it isn't working. Link to comment
creedon Posted November 30, 2021 Share Posted November 30, 2021 @RolandFuseHub The code you cited is not for v7.1 but I believe there were some examples that were provided for v7.1 above. RolandFuseHub 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
kirillillenkov Posted January 19, 2022 Share Posted January 19, 2022 On 2/1/2021 at 2:16 AM, ievavi said: Site URL: https://www.ievaviphoto.com Hello, there! I'm trying to achieve a similar result to one in the example (parallax footer / slide out footer upon scroll). May anyone would be able to give a hand? Example: https://yatesdesign.com.au/divi-tutorial-reveal-footer-scroll/ My site: www.ievaviphoto.com Thank you! Hey Ieva! I was looking for the footer code but took a look at your website - and it's so amazing! Could you share the code you used to make such burger menu on desktop (or the source where you can purchase the code)? Thanks in advance! Kirill Link to comment
ievavi Posted January 19, 2022 Author Share Posted January 19, 2022 (edited) 1 hour ago, kirillillenkov said: Hey Ieva! I was looking for the footer code but took a look at your website - and it's so amazing! Could you share the code you used to make such burger menu on desktop (or the source where you can purchase the code)? Thanks in advance! Kirill Heey, Kill! Thanks for sweet words — yes, of course! 🙂 Squarestylist's mega menu could be a good starting point and then you can customised according to your needs: https://www.squarestylist.com/shop/mega-menu If free alternative, this article can be very helpful: https://ryandejaegher.com/how-to-add-a-desktop-burger-to-squarespace-7.1/ Edited January 19, 2022 by ievavi kirillillenkov 1 Link to comment
kirillillenkov Posted January 19, 2022 Share Posted January 19, 2022 3 hours ago, ievavi said: Heey, Kill! Thanks for sweet words — yes, of course! 🙂 Squarestylist's mega menu could be a good starting point and then you can customised according to your needs: https://www.squarestylist.com/shop/mega-menu If free alternative, this article can be very helpful: https://ryandejaegher.com/how-to-add-a-desktop-burger-to-squarespace-7.1/ Thanks a lot!! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment