Footer style request help :)

Hi there,

I'm trying to create a footer similar to the one on this page - https://hoodbyair.world
I also want the footer text to show over my banner video with a transparent background.

I've tried many methods but I can't get it to work.

Thanks in advance!

Hi! You'll need to set the footer to an absolute or fixed position in the Custom CSS section. Try this, FYI this will only apply to the homepage, but if you want it applied everywhere just remove .homepage from it. 

.homepage #footer-sections {
  position: absolute;
  bottom: 0;
  top: auto;
  left: 0;
  width: 100%;
  z-index: 999;
}

If you need help let me know nick@nickscola.com 

17 minutes ago, NickScola said:

Hi! You'll need to set the footer to an absolute or fixed position in the Custom CSS section. Try this, FYI this will only apply to the homepage, but if you want it applied everywhere just remove .homepage from it. 

.homepage #footer-sections {
  position: absolute;
  bottom: 0;
  top: auto;
  left: 0;
  width: 100%;
}

If you need help let me know nick@nickscola.com 

Hi Nick!

Thanks for the fast reply.

I tried this but unfortunately it just hides the footer, even if I scroll down, any idea why this is happening?

Thanks!

2 minutes ago, kxvvywxvvy said:

Hi Nick!

Thanks for the fast reply.

I tried this but unfortunately it just hides the footer, even if I scroll down, any idea why this is happening?

Thanks!

Ah thats my bad! I totally forgot to apply a z-index prop / value. I've updated the code.

28 minutes ago, NickScola said:

Ah thats my bad! I totally forgot to apply a z-index prop / value. I've updated the code.

I've got it working to some degree.

If you check my page now you'll notice the bottom of the page has a random white bar, is there anyway to get rid of that?

Thanks so much for your help

12 minutes ago, kxvvywxvvy said:

I've got it working to some degree.

If you check my page now you'll notice the bottom of the page has a random white bar, is there anyway to get rid of that?

Thanks so much for your help

Looks like there's 70px of padding being applied. Remove this: 

main#page { 
  padding-bottom: 0px; 
}

Again, if you want this on the homepage only just add .homepage 

.homepage main#page { 
  padding-bottom: 0px;
} 

1 minute ago, NickScola said:

Looks like there's 70px of padding being applied. Remove this: 

main#page { 
  padding-bottom: 0px; 
}

Again, if you want this on the homepage only just add .homepage 

.homepage main#page { 
  padding-bottom: 0px;
} 

 

Worked perfectly, you're a genius!

Thank you so much!