title: Box not vertically aligned with I add a navigation bar on top
body: <p><strong>UPD</strong> : <em>Take a look at the snippe below please</em></p>
  
  <p>I am trying to create a homepage with a navigation bar on top and a box in the center of the homepage screen. I took the idea from a template. </p>
  
  <p>My problem is that I cannot make the box look in the center. </p>
  
  <p>The original script that inspired me : 
  <div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
   }
  #wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .label {
    cursor: pointer;
    &amp;:focus
      outline: none;
  }  
  .menu{
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    width: 240px;
    height: 100%;
    transform: translate3d(-240px, 0, 0);
    transition: transform 0.35s;
  }    
    .menu-toggle  {
      position: absolute  ;  
      right: -60px;
      width: 60px;
      height: 60px;
      line-height: 0px  ;  
      display: block;
      padding: 0;
      text-indent: -9999px;
      background: #fff url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) 50% 50% / 25px 25px no-repeat
    }
    ul
      li
        &gt; .label
          background: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png) 95% 50% / 16px 16px no-repeat
        a, .label
          display: block
          text-align: center
          padding: 0 20px
          line-height: 60px
          text-decoration: none
          color: #000
          &amp;:hover
            color: #666
  
  /* hide inputs */          
  .menu-checkbox {
    display: none;
   }
  /* hide navigation icon for sublabels */    
  .menu .menu label.menu-toggle{
    background: none;
  }  
  /* fade in checked menu */    
  .menu-checkbox:checked + .menu{
    transform: translate3d(0, 0, 0);
   }
      
      
  /* for show */
  html, body{
    height: 100%
   }
  body{
    background: url(http://37.media.tumblr.com/f6c67ec2821a91051e4175f8a102e1e2/tumblr_n6rzpcsMk41st5lhmo1_1280.jpg) 50% 50% / cover
   }
  p{
    margin-bottom: 15px
   }
  #info{
    display: table;
    background: rgba(0,0,0,0.4);
    height: 100%;
    width: 100%;
  }
    #info-content{
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      text-transform: uppercase;
      color: #fff;
      font-size: 12px;
    }
      h1     { 
        color: #fff;
        border: 3px solid #fff;
        text-align: center;
        background: rgba(0,0,0,0.1);
        font-size: 22px;
        font-weight: normal;
        padding: 20px;
        margin: 10px;
        display: inline-block   ;
      }
        strong{
          display: block;
          font-size: 26px;
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
  &lt;div id="info"&gt;
  &lt;div id="info-content"&gt;
  &lt;h1&gt;Multi level &lt;strong&gt;CSS-only push menu&lt;/strong&gt;&lt;/h1&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="menu"&gt;
  &lt;div class="menu-toggle"&gt;Toggle
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu-1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu-2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;
  &lt;div class="label"&gt;Menu-3
  &lt;div class="menu"&gt;
  &lt;div class="menu-toggle"&gt;Toggle
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu-3-1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;
  &lt;div class="label"&gt;Menu-3-2
  &lt;div class="menu"&gt;
  &lt;div class="menu-toggle"&gt;Toggle
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu-3-2-1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu-3-2-2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;
  &lt;div class="label"&gt;Menu-3-2-3
  &lt;div class="menu"&gt;
  &lt;div class="menu-toggle"&gt;Toggle
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu-3-2-3-1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu-3-2-3-2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu-3-2-3-3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu-3-2-3-4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu-3-2-4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu-3-3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu-3-4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;div class="label"&gt;Menu-4
  &lt;div class="menu"&gt;
  &lt;div class="menu-toggle"&gt;Toggle
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu-4-1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu-4-2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu-4-3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu-4-4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;div class="label"&gt;Menu-5
  &lt;div class="menu"&gt;
  &lt;div class="menu-toggle"&gt;Toggle
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu-5-1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu-5-2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu-5-3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu-5-4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu-6&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- #wrapper --&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And the one that works perfectly with the navigation bar BUT the box is not aligned vertically in the center of the content :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
   }
  
  html, body{
    height: 100%;
   }
   
  body {
     overflow:hidden;
    background: url(http://37.media.tumblr.com/f6c67ec2821a91051e4175f8a102e1e2/tumblr_n6rzpcsMk41st5lhmo1_1280.jpg) 50% 50% / cover
  }
  
  #wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  #menu,
  #menu ul,
  #menu ul li,
  #menu ul li a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #menu:after,
  #menu &gt; ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
  
  #menu {
    width: 20px;
    background-color: transparent;
    
  }
  
  #menu &gt; ul &gt; li {
    float: left;
  }
  
  #menu &gt; ul &gt; li &gt; a {
    padding: 20px;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
    color: #FFF;
    -webkit-transition: color .2s ease;
    -moz-transition: color .2s ease;
    -ms-transition: color .2s ease;
    -o-transition: color .2s ease;
    transition: color .2s ease;
  }
  #menu &gt; ul &gt; li:hover &gt; a,
  #menu &gt; ul &gt; li.active &gt; a {
    color: #46545d;
    background: #15A6DD;
  }
  
  .has-sub {
  background: #fff;
  }
  
  .has-sub img {
  max-width:34px;
  max-height:34px;
  padding:20px;
  }
  
  
  #menu &gt; ul &gt; li.has-sub &gt; a {
    padding-right: 25px;
  }
  #menu &gt; ul &gt; li.has-sub &gt; a::after {
    position: absolute;
    top: 21px;
    right: 10px;
    width: 4px;
    height: 4px;
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
    content: "";
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: border-color 0.2s ease;
    -moz-transition: border-color 0.2s ease;
    -ms-transition: border-color 0.2s ease;
    -o-transition: border-color 0.2s ease;
    transition: border-color 0.2s ease;
  }
  #menu &gt; ul &gt; li.has-sub:hover &gt; a::after {
    border-color: #8fc647;
  }
  #menu ul ul {
    position: absolute;
    left: -9999px;
  }
  #menu li:hover &gt; ul {
    left: auto;
  }
  #menu ul ul li {
    height: 0;
    -webkit-transition: height .2s ease;
    -moz-transition: height .2s ease;
    -ms-transition: height .2s ease;
    -o-transition: height .2s ease;
    transition: height .2s ease;
  }
  #menu ul li:hover &gt; ul &gt; li {
    height: 32px;
  }
  #menu ul ul li a {
    padding: 10px 20px;
    width: 500px;
    font-size: 12px;
    background: #333333;
    text-decoration: none;
    color: #dddddd;
    -webkit-transition: color .2s ease;
    -moz-transition: color .2s ease;
    -ms-transition: color .2s ease;
    -o-transition: color .2s ease;
    transition: color .2s ease;
  }
  #menu ul ul li:hover &gt; a,
  #menu ul ul li a:hover {
    color: #ffffff;
  }
  
  #info{
    display: table;
    height: 100%;
    width: 100%;
  }
    #info-content{
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      text-transform: uppercase;
      color: #fff;
      font-size: 12px;
    }
    
        h1     { 
        color: #fff;
        border: 3px solid #fff;
        text-align: center;
        font-size: 22px;
        font-weight: normal;
        padding: 20px;
        margin: 10px;
     margin-top:-54px;
        display: inline-block   ;
      }
        strong{
          display: block;
          font-size: 26px;
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
  &lt;div id="menu"&gt;
  &lt;ul&gt;
  &lt;li class="has-sub"&gt;&lt;img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" alt="" /&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#" target="_blank"&gt;Subfield 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" target="_blank"&gt;SubField&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="info"&gt;
  &lt;div id="info-content"&gt;
  &lt;h1&gt;All Channels &lt;strong&gt;DISPLAY PPC SOCIAL&lt;/strong&gt;&lt;/h1&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried adding a <code>margin-top:-54px;</code> for the <code>h1</code> because the navigation button is exactly 54px of height. </p>
  
  <p>Below I posted an image of how the original looks and underneath how mine looks (after adding the margin-top:-54px)</p>
  
  <p><a href="https://i.stack.imgur.com/vqDqn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vqDqn.png" alt="enter image description here"></a></p>
  
  <p>I guess the problem relies here : </p>
  
  <p>ORIGINAL : </p>
  
  <pre><code>.menu{
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    width: 240px;
    height: 100%;
    transform: translate3d(-240px, 0, 0);
    transition: transform 0.35s;
  }  
  </code></pre>
  
  <p>MINE :</p>
  
  <pre><code>#menu {
    width: 20px;
    background-color: transparent;
  }
  </code></pre>
  
  <p><strong>SNIPPET</strong> that works when in fullscreen but the button dissapears if I change the screen size : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
   }
  
  html, body{
    height: 100%;
   }
   
  body {
     overflow:hidden;
    background: url(http://37.media.tumblr.com/f6c67ec2821a91051e4175f8a102e1e2/tumblr_n6rzpcsMk41st5lhmo1_1280.jpg) 50% 50% / cover
  }
  
  #wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  #menu,
  #menu ul,
  #menu ul li,
  #menu ul li a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #menu:after,
  #menu &gt; ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
  
  #menu {
    position: absolute;
    top: 0;
    right: 75%;
    width: 240px;
    height: 100%;
    transform: translate3d(-240px, 0, 0);
    transition: transform 0.35s;
  }
  
  #menu &gt; ul &gt; li {
    float: left;
  }
  
  #menu &gt; ul &gt; li &gt; a {
    padding: 20px;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
    color: #FFF;
    -webkit-transition: color .2s ease;
    -moz-transition: color .2s ease;
    -ms-transition: color .2s ease;
    -o-transition: color .2s ease;
    transition: color .2s ease;
  }
  #menu &gt; ul &gt; li:hover &gt; a,
  #menu &gt; ul &gt; li.active &gt; a {
    color: #46545d;
    background: #15A6DD;
  }
  
  .has-sub {
  background: #fff;
  }
  
  .has-sub img {
  max-width:34px;
  max-height:34px;
  padding:20px;
  }
  
  
  #menu &gt; ul &gt; li.has-sub &gt; a {
    padding-right: 25px;
  }
  #menu &gt; ul &gt; li.has-sub &gt; a::after {
    position: absolute;
    top: 21px;
    right: 10px;
    width: 4px;
    height: 4px;
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
    content: "";
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: border-color 0.2s ease;
    -moz-transition: border-color 0.2s ease;
    -ms-transition: border-color 0.2s ease;
    -o-transition: border-color 0.2s ease;
    transition: border-color 0.2s ease;
  }
  #menu &gt; ul &gt; li.has-sub:hover &gt; a::after {
    border-color: #8fc647;
  }
  #menu ul ul {
    position: absolute;
    left: -9999px;
  }
  #menu li:hover &gt; ul {
    left: auto;
  }
  #menu ul ul li {
    height: 0;
    -webkit-transition: height .2s ease;
    -moz-transition: height .2s ease;
    -ms-transition: height .2s ease;
    -o-transition: height .2s ease;
    transition: height .2s ease;
  }
  #menu ul li:hover &gt; ul &gt; li {
    height: 32px;
  }
  #menu ul ul li a {
    padding: 10px 20px;
    width: 500px;
    font-size: 12px;
    background: #333333;
    text-decoration: none;
    color: #dddddd;
    -webkit-transition: color .2s ease;
    -moz-transition: color .2s ease;
    -ms-transition: color .2s ease;
    -o-transition: color .2s ease;
    transition: color .2s ease;
  }
  #menu ul ul li:hover &gt; a,
  #menu ul ul li a:hover {
    color: #ffffff;
  }
  
  #info{
    display: table;
    height: 100%;
    width: 100%;
  }
    #info-content{
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      text-transform: uppercase;
      color: #fff;
      font-size: 12px;
    }
    
        h1     { 
        color: #fff;
        border: 3px solid #fff;
        text-align: center;
        font-size: 22px;
        font-weight: normal;
        padding: 20px;
        margin: 10px;
        display: inline-block   ;
      }
        strong{
          display: block;
          font-size: 26px;
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
  &lt;div id="menu"&gt;
  &lt;ul&gt;
  &lt;li class="has-sub"&gt;&lt;img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" alt="" /&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#" target="_blank"&gt;Subfield 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" target="_blank"&gt;SubField&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="info"&gt;
  &lt;div id="info-content"&gt;
  &lt;h1&gt;All Channels &lt;strong&gt;DISPLAY PPC SOCIAL&lt;/strong&gt;&lt;/h1&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>And the problem relies here</strong> :</p>
  
  <pre><code>#menu {
    right: 75%;
  }
  </code></pre>