Archived topic
position of site-footer on smaller (in height) pages
8 replies · Started by Joerg on December 4, 2020
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.
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
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;
}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.
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.
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
Glad to hear that!
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/
Thats great! Really glad we could be of help and thank your for the 5* review - really appreciated.
