Persistant Footer The Wappler Way?

[Antony]

I want to create a persistant footer at the bottom of the viewport, which stays there as the user scrolls… is there a Wappler/Bootstrap way to do this now, or do I just add my own CSS as per this post below?

Or can I use an off canvas which is always on the page?

Push Footer to bottom of viewport

With this example, I will show how to create a footer which stays at the bottom of the viewport unless the page content pushes it further. We start with a page that contains the normal ingredients: [image] Right-click App and from the dialog, choose Blocks, Navigation and a navigation structure of your choice. For this example, we have chosen Brand Menu. [image] Right-click Header, choose to add component after, stay with Suggested and add the Main element. [image] To add the Foote…

[mebeingken]

I believe adding a Footer element with fixed bottom position to the layout (node) is what you are looking for.

[Teodor]

You need to add class="fixed-bottom" to the element you want to stay fixed at the bottom.

[sitestreet]

And make sure you add some bottom margin to the main area otherwise it will go behind the fixed footer.

[TomD]

I think you’re question has been answered, but it might be worth mentioning that Ben’s solution does not give the same result as the other solution. For most purposes, I think Ben’s solution is preferable - but the solution suggested by Teodor perhaps answers your question more precisely (and is hopefully what you want).

[Antony]

Thanks for your reply @TomD… can you put the difference in a few words so I understand the subtitles of this?

[TomD]

@Antony

can you put the difference in a few words

Certainly - or perhaps a few images might be clearer.

If there isn’t enough content to fill the page - eg on a login page - the default position of the footer looks silly (IMO). It will appear where the content ends:

(this is very common on lots of websites)

Using Bootstrap’s ‘fixed-bottom’ class, it looks fine (in this case, at least):

But if there is sufficient content that requires scrolling, the footer will still be at the bottom of the page:

… which is the most accurate answer to your question, and may well be what you want, but it’s not the best solution for typical websites (IMO). Generally, it’s best if the footer appears at the bottom: either if there’s isn’t enough content to fill the page or once you scroll to the bottom of the page. This is what Ben’s solution offers.