Footer reveal on scroll & change layout of footer on mobile

Site URL: http://coooooffee.squarespace.com

Heey, 

2 things:

1. I want to have the footer hidden and revealed on scroll when you get to the bottom of the page. I tried the instructions of this forum https://forum.squarespace.com/topic/180899-footer-reveal-on-scroll/ but it didn't work. I also tried playing around with z-index which worked but then none of the links were clickable. 

2. When in mobile view, the 2 blocks in the footer stack. Is there any way to keep them side by side like how it is on desktop?

TY!!

Website: coooooffee.squarespace.com
PW: brineintopedro

Q1. Which code did you use?

Q2. Add to Design > Custom CSS

/* Mobile-Footer links side by side */
@media screen and (max-width:640px) {
div#footerBlocksMiddle .span-12>.row>.col {
    width: 50% !important;
    float: left !important;
}
}

Awesome! Thanks @tuanphan, that code worked for the links to go side by side. YAY!

For Q1: 
I tried this code but it didn't work

@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;
        }
 
}

5 hours ago, c_rissy said:

Awesome! Thanks @tuanphan, that code worked for the links to go side by side. YAY!

For Q1: 
I tried this code but it didn't work

@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;
        }
 
}

Can you add it again? We can check footer links easier

@tuanphan I'm looking for the same thing (footer reveal on scroll / drawer footer) I was using a plugin I paid for from SquareStud.io, which worked for awhile, but I noticed recently it broke and I can't get in touch with the dev. 

I followed this code from the previous post mentioned above but it didn't "reveal" anything, so I'm not sure what do to. Any help would be appreciated 🙂 🙂

///DRAWER FOOTER HACK
@media only screen and ( min-width: 768px ) {
      #page {
         margin-bottom: 55px; /*This may to be adjusted depending on the content of your footer*/
        }

        footer.sections {
         position: fixed;
         height: 100px; /*This may to be adjusted depending on the content of your footer*/
         width: 100%;
         bottom: 0;
        }
}

On 7/1/2022 at 10:45 AM, DearJamie said:

@tuanphan I'm looking for the same thing (footer reveal on scroll / drawer footer) I was using a plugin I paid for from SquareStud.io, which worked for awhile, but I noticed recently it broke and I can't get in touch with the dev. 

I followed this code from the previous post mentioned above but it didn't "reveal" anything, so I'm not sure what do to. Any help would be appreciated 🙂 🙂

///DRAWER FOOTER HACK
@media only screen and ( min-width: 768px ) {
      #page {
         margin-bottom: 55px; /*This may to be adjusted depending on the content of your footer*/
        }

        footer.sections {
         position: fixed;
         height: 100px; /*This may to be adjusted depending on the content of your footer*/
         width: 100%;
         bottom: 0;
        }
}

Hi. What is your site url?

Hello,

Hoping to achieve the same feature; pop-up footer when scrolling. I copied the same code, but doesn't seem to work. Any help appreciated, TY.

Version 7.1

Site url: https://www.wilsonarchitects.com.au/
 

5 hours ago, designed_________ said:

Hello,

Hoping to achieve the same feature; pop-up footer when scrolling. I copied the same code, but doesn't seem to work. Any help appreciated, TY.

Version 7.1

Site url: https://www.wilsonarchitects.com.au/
 

Add to Design > Custom CSS

footer#footer-sections {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
main#page {
    padding-bottom: 390px;
}

4 hours ago, THREECATS said:

Hi @tuanphan & @designed_________

I'm also looking for a fix to this... I too had paid for the (footer reveal on scroll / drawer footer) from SquareStud.io, which worked for 12 months, but recently stopped working. I am guessing it's failed now due to a recent update from SS 7.1 which my site is based on.   https://threecats.com.au

Would really appreciate some help to fix this... have tried the other codes offered and they just dont work.

Thanks heap 🙂

David / THREE CATS

Can you share link to SquareStu Code (Demo page)?

15 hours ago, tuanphan said:

Add to Design > Custom CSS

footer#footer-sections {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
main#page {
    padding-bottom: 390px;
}

 

Thank you - is it possible to create a motion-like (responsive) footer. 

Example here: https://architectureau.com/

17 hours ago, tuanphan said:

Can you share link to SquareStu Code (Demo page)?

Hi @tuanphan thanks for the reply 🙂

Here's my code link from them:

https://plugin.squarestud.io/guide/drawer-footer-8o2?ss_source=sscampaigns&ss_campaign_id=5f085e4f58c68b2c0dbafa8e&ss_email_id=60af1a47f758a66d0fb1ef4c&ss_campaign_name=Plugin+Inside+📦&ss_campaign_sent_date=2021-05-27T04%3A04%3A28Z

AND the code:

<style>footer {position:fixed;left:0;bottom:0;width:100%;box-sizing:border-box; max-width:100vw !important;z-index:-9;} footer .sqs-layout {word-wrap: break-word; width:100%;max-width:1200px;margin-left:auto;margin-right:auto;} html{background:#fff !important;}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="footerbox" style="pointer-events:none;">
</div>
<script>
$(function(){
$( ".footerbox" ).insertAfter( $( "body" ) );
});
</script>
<script>
$(window).resize(function(){
var footheight = $("footer").outerHeight();
$(".footerbox").css({height: footheight});
});
</script>
<script>
$(function(){
var footheight = $("footer").outerHeight();
$(".footerbox").css({height: footheight});
});
</script>

@tuanphan Ooh grateful for your help and for the others who have posted! 

My site is www.oliomakes.com but I removed the coding because I couldn't get it to work. I also bought another drawer footer from SquareRefresh that I couldn't get to work either again. Both had worked in the past, so guessing it was an update that broke it. 

7 hours ago, THREECATS said:

Hi @tuanphan thanks for the reply 🙂

Here's my code link from them:

https://plugin.squarestud.io/guide/drawer-footer-8o2?ss_source=sscampaigns&ss_campaign_id=5f085e4f58c68b2c0dbafa8e&ss_email_id=60af1a47f758a66d0fb1ef4c&ss_campaign_name=Plugin+Inside+📦&ss_campaign_sent_date=2021-05-27T04%3A04%3A28Z

AND the code:

<style>footer {position:fixed;left:0;bottom:0;width:100%;box-sizing:border-box; max-width:100vw !important;z-index:-9;} footer .sqs-layout {word-wrap: break-word; width:100%;max-width:1200px;margin-left:auto;margin-right:auto;} html{background:#fff !important;}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="footerbox" style="pointer-events:none;">
</div>
<script>
$(function(){
$( ".footerbox" ).insertAfter( $( "body" ) );
});
</script>
<script>
$(window).resize(function(){
var footheight = $("footer").outerHeight();
$(".footerbox").css({height: footheight});
});
</script>
<script>
$(function(){
var footheight = $("footer").outerHeight();
$(".footerbox").css({height: footheight});
});
</script>

Hi,

I mean the link to demo effect, not the instruction. Can't imagine the effect you want, so need to see the demo

4 hours ago, DearJamie said:

@tuanphan Ooh grateful for your help and for the others who have posted! 

My site is www.oliomakes.com but I removed the coding because I couldn't get it to work. I also bought another drawer footer from SquareRefresh that I couldn't get to work either again. Both had worked in the past, so guessing it was an update that broke it. 

Try this code

footer#footer-sections {
    position: fixed !important;
    bottom: 0;
    left: 0;
    width: 100%;
}
main#page {
    padding-bottom: 100px;
}

On 7/8/2022 at 5:55 PM, tuanphan said:

Hi,

I mean the link to demo effect, not the instruction. Can't imagine the effect you want, so need to see the demo

Hi @tuanphan

Thank you for responding... and sorry for my late reply.

Here is a DEMO of what I had working:   reveal footer on scroll

https://yatesdesign.com.au/divi-tutorial-reveal-footer-scroll/

Thanks for any help 🙂

David / THREE CATS

On 7/18/2022 at 7:00 AM, THREECATS said:

Hi @tuanphan

 

Thank you for responding... and sorry for my late reply.

Here is a DEMO of what I had working:   reveal footer on scroll

https://yatesdesign.com.au/divi-tutorial-reveal-footer-scroll/

Thanks for any help 🙂

 

David / THREE CATS

OKay. Got it. This is your site? https://threecats.com.au/

On 7/19/2022 at 12:05 PM, tuanphan said:

OKay. Got it. This is your site? https://threecats.com.au/

Hi @tuanphan   Yes, that's me :)

18 hours ago, THREECATS said:

Hi @tuanphan   Yes, that's me 🙂

Add to Design > Custom CSS

footer#footer-sections {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -1;
}
main#page {
    padding-bottom: 350px;
}
@media screen and (max-width:767px) {
main#page {
    padding-bottom: 800px;
}
}

21 hours ago, tuanphan said:

Add to Design > Custom CSS

footer#footer-sections {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -1;
}
main#page {
    padding-bottom: 350px;
}
@media screen and (max-width:767px) {
main#page {
    padding-bottom: 800px;
}
}

 

Thank you so much @tuanphan  That worked perfectly!! 

Hi @tuanphan...  

Sorry to bother you again... but that code killed all hyperlinks in the footer... any thoughts... ?

Thanks

David / THREE CATS

On 7/26/2022 at 10:17 AM, tuanphan said:

Add to Design > Custom CSS

footer#footer-sections {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -1;
}
main#page {
    padding-bottom: 350px;
}
@media screen and (max-width:767px) {
main#page {
    padding-bottom: 800px;
}
}

 

First, change padding-bottom to margin-bottom

Next, change z-index: -1; to z-index: 0;

footer#footer-sections {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 0;
}
main#page {
    padding-bottom: 350px;
}
@media screen and (max-width:767px) {
main#page {
    margin-bottom: 800px;
}
}

@tuanphan Perfect!!  Thank you for your help, it's very much appreciated.  So for others who find this later, YES this now works again 🙂

David / THREE CATS IT STUDIO

Hey @THREECATS

This code works but now the hyperlinks do not. Can you help out with this?

PivotPoint (pivotpointretail.com)

footer#footer-sections {
    position: fixed !important;
    bottom: 0;
    left: 0;
    width: 100%;
}
main#page {
    padding-bottom: 160px;
}

Hi @KevinP  

If you *carefully* check the code you posted above, AND the code 3 posts above (the last one by @tuanphan) you will see you have a few differences in YOUR CODE that is causing your problem (assuming you want the footer reveal to work AND have the footer links to work).

1)   I see you have *!important;* on fixed position, which should NOT be there.

2)  I see you have NOT added *z-index: 0;*

My final code (which you may need to adjust for vertical heights on my mobile etc) are as follows:

//--START - Footer Reveal--
footer#footer-sections {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 0;
}
main#page {
    margin-bottom: 510px;
}
@media screen and (max-width:767px) {
main#page {
    margin-bottom: 800px;
}
}
//--END - Footer Reveal--

I can CONFIRM this code above is live on my website and is WORKING as I type:   https://threecats.com.au/

This should get you working 🙂

Regards

David / THREE CATS IT STUDIO

@THREECATS THANK YOU!

Now the NEW problem is that I have an inset banner section which is showing the fixed footer behind it when scrolling. It's distracting.

Any advice on this?