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

[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.

[Elvin]

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

[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/

[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.

[David]

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.

[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

[David]

Glad to hear that!

[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/

[David]

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

[Author]

Posts