Transparent Footer Background, so text shows up over the portfolio landing pages on my home screen

When the footer is disabled, the home page is full screen and the user cant scroll down at all. I like how that looks
But when I add a footer, it hides below and the user needs to scroll down a tiny bit.

I'm trying to do 2 things

1. make the background of the footer transparent so the text floats over the image in the bottom corner.

2. move the footer up, so the user cant scroll down.

website is: https://www.kiriako.ca/

Add to Design > Custom CSS

body.homepage {
    position: relative;
}
body.homepage footer#footer-sections {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
}
body.homepage footer.sections section, body.homepage footer.sections .section-background,body.homepage .section-border {
    background: transparent !important;
}

Thanks!

Is thee a way to apply this to all pages?

Or at least change the background colour on a specific page? It would be great if I could get rid of the blue footer on my info + contact page.

On 2/2/2023 at 10:19 PM, kiriako said:

Thanks!

Is thee a way to apply this to all pages?

Or at least change the background colour on a specific page? It would be great if I could get rid of the blue footer on my info + contact page.

Remove body.homepage from the code

"body.homepage" is used 5 times in the code you provided? which one am I supposed to remove? I tried removing all of them and that didn't work.

Thanks! that worked 🙂 

Thanks for this code @tuanphan - really helpful!
I was wondering if there was a way to either hide the footer when a user is viewing a site on a mobile device and opens the 'burger' menu?
As my footer contains a few lines of text, when I view my site on a mobile device, the menu is obscured and unusable (see attached image). Everything works fine on the desktop site.
Any advice or ideas welcomed - thanks!

I've managed to fix this by moving the menu up using this CSS:

/* Move up overlay menu */
.header-menu-nav-folder-content {
    justify-content: flex-start;
}