Persistent Header Reveal.js

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>