footer reveal set - now footer overlapping top 2 sections of page

Here is the site I am working on:
http://webbiz.obscureentrepreneur.com/

I set up a footer-reveal using jquery (also tried using only css and still having same issue)

Everything looks good except the the top 2 sections of the page are appearing under the footer.

The footer is only sliding under (in a “fixed” position) the “recent work” section and “partners” section.
I have tried using z-index in multiple ways to correct this and it’s not working.

Any help would be much appreciated!

Hello there,

I hope you are doing well today.

You can use the following CSS code to have the footer be permanent by going to Appearance > Customize > Additional CSS and pasting it there.

/*Footer*/
.site-footer {
    position: sticky;
    z-index: 10;
}

I hope this helps.

Best Regards,
Support

Thanks for your reply but this did not work. To be clear - as you can see in the image I provided the footer is appearing ABOVE the content of the first two sections of the homepage. I want it to be underneath the content so that it is not revealed until the user scrolls to the bottom of page.

Setting to position: sticky actually makes it worse because that puts it above all the content (each section of the homepage). Whereas when I set to fixed, it only overlaps the top 2 sections but does correctly go under the bottom 2 sections.

The goal is to have the footer not reveal itself at all until user scrolls to bottom.

Please advise. Thanks

update: by setting background color to white on the second section, the footer now goes away when scrolling that section as welll…so at this point, the only problem is getting the footer to not show up over the main header image when landing on the homepage.

Any help would be appreciated!

update:

fixed it with this:

.parallax-mirror {
z-index: -10 !important
}

Seems to be working now! let me know if for any reason you do not think that is a proper fix.

Hello there,

I am glad you found a suitable solution.

Simply ensure that you have a child theme active to contain the CSS and changes to the theme. Here is a useful plugin:

Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support

Yes, I am using a child theme of shapely however…it will not allow me to edit the css directly on the style.css file from wordpress dashboard. The only way I can edit the css is via custom plugin or the additional css section in customizer.

Is this normal for a child theme of shapely? Seems like I should be able to edit the css directly on the style.css file.

Can you give me some insight here? thanks