Overlay footer over main homepage section content

Store Design

Topic summary

A user seeks to overlay their footer on top of the main homepage content in the Baseline theme, providing a reference image showing the desired effect.

Solution Provided:

  • Add CSS code to theme.min.css that positions the footer as fixed at the bottom with z-index 999
  • The code makes the footer background transparent and adjusts text colors to white

Follow-up Request:
The original poster asks how to make the page fit the screen height without scrolling (like janemade.co).

Additional Solution:

  • Add CSS targeting the background video wrapper with padding-bottom: 100vh to achieve full viewport height
  • Both solutions successfully resolved the issue

Status: A new user (NEEN2) with the Savor theme requests similar help for overlaying their footer across the entire website, providing their own reference image. This request remains unanswered.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

I’d love some help to overlay the footer on top of the main homepage section content.

This is my theme (Baseline) currently: https://emy-creative-studio.myshopify.com but the image below is how I’d love it to be:

Screen-Shot-2022-01-19-at-9.34.26-am.jpg
Screen-Shot-2022-01-19-at-9.34.26-am.jpg2814×856 182 KB

2

Hi @pearlerwork ,

To change you follow the instruction:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.min.css->paste below code at the bottom of the file:
.template-index .bg-footer-background {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #fff;
    z-index: 999;
}
.template-index .bg-footer-background .bg-primary-background {
    background: transparent !important;
}
.template-index .bg-footer-background .text-base {
    color: #fff;
}
.template-index .bg-footer-background #contact_form {
    color: #fff;
}
.template-index .bg-footer-background #contact_form .border-primary-text {
    border-color: #fff;
}

I hope it would help you.

3

That worked beautifully, thanks so much! @AvadaCommerce

Would you happen to know how to make it fit to the height of my screen so that it doesn’t have any scroll on all devices? Example: https://janemade.co/

4

Hi @pearlerwork ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.min.css->paste below code at the bottom of the file:
.template-index [data-has-background-video] .background-video-wrapper {
    padding-bottom: 100vh;
}

I hope it would help you.

1 Like
5

Yeah that’s perfect, thanks heaps! @AvadaCommerce

6

Hi!
Could you help me with the same concern - I want to overlay the footer on top of the main page section content across my website. My theme I am using is Savor. Here is the reference image

image
image1380×418 44.9 KB