position:fixed in reveal.js

Question

I am trying to make a header for my reveal.js presentation that sticks to the top of the screen. The content in the header is dynamic on a per-slide basis, so I have to place the markup within the section tag.

Apparently position:fixed does not really provide satisfying results in reveal.js if the markup is within the section tag. I can't really make out why that is exactly, but I found some info in the github repo suggesting setting the presentation size to fit the viewport size with:

Reveal.initialize {
    ...
    width: '100%',
    height: '100%',
    ...
}

But it still doesn't work for me - it seems the presentation is not really affected by the above. Here is a demo:

https://dl.dropboxusercontent.com/u/706446/_linked%20stuff/reveal.js/index.html

Any ideas how to solve this?

Irreverence

No ideas. But I want to do the opposite (place a block on the lower left) and I'm equally frustrated. – Angeloangelology

Here is the thread on github I was mentioning, but I was not even able to make the show fill the viewport: github.com/hakimel/reveal.js/issues/857 I have not still achieved this, but my plan is to put some text in the slide and then use javascript to move it out of the slide on load. – Irreverence

Answer 1

Add this to css:

.reveal.slide .slides > section, .reveal.slide .slides > section > section {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: absolute !important;
  top: 0 !important;
  align-items: center !important;
}
section > h1, section > h2 {
  position: absolute !important;
  top: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;
}
.print-pdf .reveal.slide .slides > section, .print-pdf .reveal.slide .slides > section > section {
  min-height: 770px !important;
  position: relative !important;
}

• Demo https://rawgit.com/rofrol/reveal.js/fixed_header/
• Code https://github.com/rofrol/reveal.js/blob/fixed_header/index.html#L411
• Discussion https://github.com/hakimel/reveal.js/issues/1312 https://github.com/hakimel/reveal.js/issues/180

Larcher

Answer 2

At the end of your main.html add:

Reveal.initialize({ center: false, })

Winepress