- This topic has 8 replies, 3 voices, and was last updated 5 years, 4 months ago by
.
-
Posts
-
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.
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
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.
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:
sliderThen 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
JoergGlad 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.
- You must be logged in to reply to this topic.
