How to add a fixed footer on all slides?

Question

I have a presentation set up with reveal.js which is meant to be used unattended. So, I want to be able to show a little footer (or another link somewhere) on all s

Answer 1

This works for me (aligns to left edge as I use built-in controls on right).

Add this to your css:

.reveal .footer {
  position: absolute;
  bottom: 1em;
  left: 1em;
  font-size: 0.5em;
}

And in your html:

<div class='reveal'>
  <div class='footer'>
    Use left and right arrows to navigate
  </div>
...

If you want the footer to disappear as soon as user navigates (i.e. it should only be shown on first slide loaded because it is just a reminder), then add this to the end of your html:

<script>
  // displayed upon load, hides when slide changes
  Reveal.addEventListener('slidechanged', function(event) {
    document.querySelector('.reveal .footer').style.display = 'none';
  });
</script>

---

In order to get a fixed content in the PDF export (on all slides) you could find this answer useful.