• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (deprecated)
You are here: Home / Draft / Persistent Header Reveal.js

Persistent Header Reveal.js

Last updated on November 5, 2018 by Sal Ferrarello

I use Reveal.js when creating slides for my presentations. Often I want persistent elements on all of the slides (for example my twitter handle @salcode or the conference hash tag).

I’ve found the easiest way to do this is by adding the following

<style>
    .fe-persistent-header {
        position: relative;
        z-index: 2;
    }
    .print-pdf .fe-persistent-header { display: none; }
    @media print { .fe-persistent-header { display: none; } }

    .fe-persistent-header a {
        color: #fff;
        float: right;
        margin: 30px 60px 20px;
    }
    .fe-persistent-header a:nth-child(2) { float: left; }
</style>
<div class="fe-persistent-header">
    <a href="https://twitter.com/search?f=tweets&q=%23wcphilly">#WCPhilly</a>
    <a href="https://twitter.com/salcode">@salcode</a>
</div>

I add this code inside the div.reveal, directly after the closing </div> of div.slides.

Before Adding My Code

<div class="reveal">
    <div class="slides">
        <section>Slide 1</section>
        <section>Slide 2</section>
    </div>
    <!-- My code will go here -->
</div>

After Adding My Code

<div class="reveal">
    <div class="slides">
        <section>Slide 1</section>
        <section>Slide 2</section>
    </div>

    <style>
        .fe-persistent-header {
            position: relative;
            z-index: 2;
        }
        .print-pdf .fe-persistent-header { display: none; }
        @media print { .fe-persistent-header { display: none; } }

        .fe-persistent-header a {
            color: #fff;
            float: right;
            margin: 30px 60px 20px;
        }
        .fe-persistent-header a:nth-child(2) { float: left; }
    </style>
    <div class="fe-persistent-header">
        <a href="https://twitter.com/search?f=tweets&q=%23wcphilly">#WCPhilly</a>
        <a href="https://twitter.com/salcode">@salcode</a>
    </div>
</div>
Sal Ferrarello
Sal Ferrarello (@salcode)
Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.
Warning! This is a draft, not a finalized post. See full draft disclosure.

Filed Under: Draft, Presentation Tagged With: reveal.js

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in