Archived topic

Extending Footer bar effect?

1 reply · Started by Matthias on May 30, 2020

Viewing posts 1–2 of 2

May 30, 2020 at 6:24 am #1307539

Hi there,

is it somehow possible with gp to create a footer like this one? (as you've guessed: you need to scroll down ;) ).That extends when you scroll down.

May 30, 2020 at 7:05 am #1307579

Hi there,

with some CSS to fix the footer to the viewport and z-index it behind the page:

/* Fix footer to bottom of viewport */
.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

Then add some bottom margin to the bottom of the body so there is empty space for the footer to be revealed - adjust accordingly:

/* add margin to match Height of footer */
body {
    margin-bottom: 400px; 
}

/* Adjust margin for tablet */
@media (max-width: 1024px) {
    body {
        margin-bottom: 600px; 
    }
}

/* Adjust margin for mobile */
@media (max-width: 768px) {
    body {
        margin-bottom: 800px; 
    }
}

This relies on the container being fullwidth with a solid color background.

This archived topic is closed to new replies.

Start building better websites today.