In a reveal.js slideshow how to position the H1 headers via CSS at he top of the slides

Question

I am using reveal.js to create HTML slide shows. By default (and with all the themes I tried) reveal.js layouts the complete content of each slide in a vertically centred manner. It looks somewhat like this:

How can I set a CSS rule for the h1 header or for one of the other reveal.js selector, so that the h1 header stays at the top of the slide while the rest is still vertically centered? I mean something like this:

---

I tried a few things by now. For example

.reveal h1 {
    position: absolute;
}

doesn't work, because with this the header does not "get out of" the vertically centred section.

I also played with changes up the hierarchy:

.reveal .slides {
  position: static;
}

(plus the h1 CSS from above), but I could not make it work either.

Finally I tried from one answer the transform approach, but this doesn't work either - probably because reveal.js already uses transform itself.

Any idea how to do this in reveal.js?

Izaak

As long as the immediate parent is positioned either absolute or relative, you are stuck inside this context for positioning child elements. What do the CSS rules for the h1and .slide elements look like? – Pestiferous

@Trollsyn h1 has (at the moment) no postion, .reveal.slide has (deep in reveal.css) {backface-visibility: hidden;}. - Not sure if that helps. – Izaak

Are you view the slide on Safari, IOS device ? – Younts

@VoKimNguyen No, Firefox on Linux and Windows. – Izaak

Answer 1

Usually this is impossible, though there is something you can do that I consider a bit hacky. You may apply 3d transformation on the parent-parent. This will force the browser to draw the parent-parent in a separate layer which affects the position: fixed child nodes.

So something like this should work:

.reveal {
    transform: translate3d(0,0,0);
}
.reveal h1 {
    position: fixed;
    top: 0;
    left: 0;
}

Still, your best approach is to make the <section/> position: static ( you may still vertically center it using display: flex ) and use postion: absolute on the <h1/>.

Systematize

I've tried your suggestion with transform, but doesn't seem to work: the h1 is still moving up and down with the rest of the slide content. (BTW, Sorry for late reply. I wasn't at the machine with the slide show files.) – Izaak

Probably the problem is that the slide has a 3d transform itself. – Systematize

Yes, I guess so. - I tried the 2nd approach (putting position: static on section and use postion: absolute on h1) but then all elements are flying to the top of the browser! – Izaak

Answer 2

I was able to adjust the code of the reveal.js example here https://revealjs.com/#/1 by adding the following code:

section {
    display: flex !important;
    flex-direction: column;
    top: unset !important; 
    height: 100vh;
}

section p {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

The html is like so:

<section class="present" style="top: 189px; display: block;">
    <h2>Hello There</h2>
    <p>
        reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
    </p>
</section>

The above css I added will centre the paragraph within the remaining space after the h2 heading is taken into account.

To take the heading out of the flow to centre the paragraph on the page, ignoring the size of the header, you could try wrapping the heading something like this:

<div style="position: relative;">
    <h2 style="position: absolute;">Hello There</h2>
</div>

Hope that helps. Is there anyway to add an additional element (either wrapping the h2 like I have shown, or within the h2) to achieve something like this?

Attire

Thanks. I will test this tomorrow. I guess the solution can work for H1 headers like for the H2 headers. – Izaak

Yes it can work for either, it wouldn't matter whether it is an h1 or h2 – Attire