[Resolved] Extending Footer bar effect?

Home Forums Support Extending Footer bar effect?

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1307539
    Matthias

    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.

    #1307579
    David
    Staff
    Customer Support

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.