title: Set header and footer reveal.js presentation
body: <p>I want to set a header and footer in my presentation. I used the following issue as a starting point: <a href="https://github.com/hakimel/reveal.js/issues/806" rel="noreferrer">https://github.com/hakimel/reveal.js/issues/806</a> and <a href="http://www.ciges.net/revealjs_demo/#/" rel="noreferrer">http://www.ciges.net/revealjs_demo/#/</a></p>
  
  <p>My current implementation gives the following output:
  <a href="https://i.stack.imgur.com/LmmXr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/LmmXr.png" alt="enter image description here"></a></p>
  
  <p>Now as far as I have understand reveal.js uses <a href="https://github.com/hakimel/reveal.js#presentation-size" rel="noreferrer">fixed size for the presentation</a> by default with a width of 960px and height of 700px. This size is completely fine to me. However, I want the headers and footer not to be fixed in this window. They need to adapt to the actual screen size. That is to say, I want the left header to be aligned to the top left corner of the screen. Likewise for the other header and footers, see also the image. How can I achieve this? Currently it seems that my headers and footers are fixed within the default window (960x700).</p>
  
  <p>I use the following code (index.html) with reveal.js 3.2.0</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
  
          &lt;title&gt;reveal.js – The HTML Presentation Framework&lt;/title&gt;
  
          &lt;meta name="description" content="A framework for easily creating beautiful presentations using HTML"&gt;
          &lt;meta name="author" content="Hakim El Hattab"&gt;
  
          &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
          &lt;meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"&gt;
  
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"&gt;
  
          &lt;link rel="stylesheet" href="css/reveal.css"&gt;
          &lt;link rel="stylesheet" href="css/theme/simple.css" id="theme"&gt;
  
          &lt;!-- Code syntax highlighting --&gt;
          &lt;link rel="stylesheet" href="lib/css/zenburn.css"&gt;
  
          &lt;!-- Printing and PDF exports --&gt;
          &lt;script&gt;
              var link = document.createElement( 'link' );
              link.rel = 'stylesheet';
              link.type = 'text/css';
              link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
              document.getElementsByTagName( 'head' )[0].appendChild( link );
          &lt;/script&gt;
  
          &lt;!--[if lt IE 9]&gt;
          &lt;script src="lib/js/html5shiv.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
  
          &lt;style type="text/css"&gt;
              .reveal div.header-left {
                  position: absolute;
                  top: 0;
                  left: 0;
                  padding: 0;
                  margin: 0;
              }
              .reveal div.header-right {
                  position: absolute;
                  top: 0;
                  right: 0;
                  padding: 0;
                  margin: 0;
              }
              .reveal div.footer-left {
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  padding: 0;
                  margin: 0;
              }
              .reveal div.footer-right {
                  position: absolute;
                  bottom: 0;
                  right: 0;
                  padding: 0;
                  margin: 0;
              }
          &lt;/style&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;div id="hidden" style="display:none;"&gt;
              &lt;div id="header"&gt;
                  &lt;div class="header-left"&gt;test header left&lt;/div&gt;
                  &lt;div class="header-right"&gt;test header right&lt;/div&gt;
                  &lt;div class="footer-left"&gt;test footer left&lt;/div&gt;
                  &lt;div class="footer-right"&gt;test footer right&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="reveal"&gt;
  
              &lt;!-- Any section element inside of this container is displayed as a slide --&gt;
              &lt;div class="slides"&gt;
                  &lt;section&gt;
                      &lt;h1&gt;Reveal.js&lt;/h1&gt;
                      &lt;h3&gt;The HTML Presentation Framework&lt;/h3&gt;
                      &lt;p&gt;
                          &lt;small&gt;Created by $x^2$ &lt;a href="http://hakim.se"&gt;Hakim El Hattab&lt;/a&gt; / &lt;a href="http://twitter.com/hakimel"&gt;@hakimel&lt;/a&gt;&lt;/small&gt;
                      &lt;/p&gt;
                  &lt;/section&gt;
  
                  &lt;section&gt;
                      &lt;h2&gt;Hello There&lt;/h2&gt;
                      &lt;p&gt;
                          reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
                      &lt;/p&gt;
                  &lt;/section&gt;
  
                  &lt;!-- Example of nested vertical slides --&gt;
                  &lt;section&gt;
                      &lt;section&gt;
                          &lt;h2&gt;Vertical Slides&lt;/h2&gt;
                          &lt;p&gt;Slides can be nested inside of each other.&lt;/p&gt;
                          &lt;p&gt;Use the &lt;em&gt;Space&lt;/em&gt; key to navigate through all slides.&lt;/p&gt;
                          &lt;br&gt;
                          &lt;a href="#" class="navigate-down"&gt;
                              &lt;img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"&gt;
                          &lt;/a&gt;
                      &lt;/section&gt;
                      &lt;section&gt;
                          &lt;h2&gt;Basement Level 1&lt;/h2&gt;
                          &lt;p&gt;Nested slides are useful for adding additional detail underneath a high level horizontal slide.&lt;/p&gt;
                      &lt;/section&gt;
                      &lt;section&gt;
                          &lt;h2&gt;Basement Level 2&lt;/h2&gt;
                          &lt;p&gt;That's it, time to go back up.&lt;/p&gt;
                          &lt;br&gt;
                          &lt;a href="#/2"&gt;
                              &lt;img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);"&gt;
                          &lt;/a&gt;
                      &lt;/section&gt;
                  &lt;/section&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;script src="lib/js/head.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/reveal.js"&gt;&lt;/script&gt;
  
          &lt;script&gt;
  
              // Full list of configuration options available at:
              // https://github.com/hakimel/reveal.js#configuration
              Reveal.initialize({
                  controls: false,
                  progress: true,
                  slideNumber: true,
                  history: true,
                  center: false, 
                  transition: 'slide', // none/fade/slide/convex/concave/zoom
                  math: {
                      mathjax: 'https://cdn.mathjax.org/mathjax/latest/MathJax.js',
                      config: 'TeX-AMS_HTML-full'  // See http://docs.mathjax.org/en/latest/config-files.html
                  },
                  // Optional reveal.js plugins
                  dependencies: [
                      { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
                      { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                      { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                      { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
                      { src: 'plugin/zoom-js/zoom.js', async: true },
                      { src: 'plugin/notes/notes.js', async: true },
                      { src: 'plugin/math/math.js', async: true }
                  ]
              });
  
          &lt;/script&gt;
  
          &lt;script src="//code.jquery.com/jquery-2.2.0.min.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript"&gt;
              var header = $('#header').html();
              if ( window.location.search.match( /print-pdf/gi ) ) {
                  $('.slides &gt; section').prepend(header);
              } else {
                  $('.slides').prepend(header);
              }
          &lt;/script&gt;
  
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>