[Resolved] position of site-footer on smaller (in height) pages

Home Forums Support [Resolved] position of site-footer on smaller (in height) pages

Home Forums Support position of site-footer on smaller (in height) pages

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1566913
    Joerg

    Hello,

    if the page content of a page is small in height, let’s say just a text line, I want such a page 100% in height and the site-footer to start below so that the site-footer will only show when a user starts scrolling down.

    Is this feasible and how can this be setup?

    Many thanks in advance.

    Cheers
    Joerg

    #1566970
    Elvin
    Staff
    Customer Support

    Hi,

    You can try David’s solution here on sticking the footer to the bottom of the page even when there’s not enough content height to put it on the bottom:

    https://generatepress.com/forums/topic/cant-get-menu-nav-or-footer-to-be-sticky/#post-1232453

    A wise man once said:
    "Have you cleared your cache?"

    #1566984
    Joerg

    Hello Elvin,

    many thanks, it looks like I did not use the right search terms when I was looking for a solution. However, the provided CSS is not working for me.

    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    .container.grid-container {
        width: 100%;
    }
    .site-footer {
        margin-top: auto;
    }

    https://www.sensorgrafie.de/slider-test/

    Cheers
    Joerg

    #1567069
    Joerg

    If that is too tricky, what I try to do is to have my landing page a full width/height slider with call to action buttons and text on it. More information for users if they scroll down.

    Cheers
    Joerg

    #1567620
    David
    Staff
    Customer Support

    Hi there,

    the simplest way to do that would be to use a Slider plugin that provides full height and call to action buttons.

    If not you can add a Slider Shortcode from any plugin to a Header Element:

    https://docs.generatepress.com/article/header-element-overview/

    After the Slider you would need to add some HTML for your call to actions eg.

    <div class="slider-overlay">
        <!-- add your slider overlay content here -->
    </div>

    In the Header element add this to the Elements classes field: slider

    Then add this CSS:

    .page-hero.slider {
        position: relative;
    }
    .page-hero.slider .slider-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
        background-color: rgba(0,0,0,0.25); /* Overlay color */
    }

    If you want to try that we can take a look if it needs tweaking.

    #1569173
    Joerg

    Hello David,

    Awesome! Many thanks for your post and help, that solved my issue, well I was able to set up what I wanted 🙂

    Thanks again and have a great weekend!

    Cheers
    Joerg

    Cheers
    Joerg

    #1569186
    David
    Staff
    Customer Support
    #1569504
    Joerg

    If you like you can have a look at my site/solution.
    I used the layer that the slider offers.

    As a small thank you I have left a review:
    https://wordpress.org/support/topic/flexible-and-fast-loading/

    Cheers
    Joerg

    #1569761
    David
    Staff
    Customer Support

    Thats great! Really glad we could be of help and thank your for the 5* review – really appreciated.

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