Problems with full-screen menus overlap with fixed navigation

Question

I have a problem that is weird. Here is my pen that I created to show you what I'm talking about: http://codepen.io/Buzzlightyear90/pen/NqyoYK?editors=110

here is the html

<header>
<div id="menu-button" role="button" title="sweet hamburger">
  <div class="hamburger">
    <div class="inner"></div>
  </div>
</div>
</header>
<nav>

  <div id="box-container">
    <div id="row1">
      <div class="box" id="box1">
        <p>About</p>
      </div>
      <div class="box" id="box2">
        <p>Work</p>
      </div>
    </div>
    <div id="row2">
      <div class="box" id="box3">
        <p>Contact</p>
      </div>
      <div class="box" id="box4">
        <p>Blog</p>
      </div>
    </div>
  </div>
</nav>

here is css

body {
  background: #edebe4;
}

header {
  background: #487C91;
  height: 100px;
  width: 100%;
  position: fixed;
}

#menu-button {
  border: 2px solid rgba(41, 37, 47, .3);
  background: rgba(41, 37, 47, 1);
  padding: 14px;
  position: absolute;
  top: 20px;
  right: 20px;
  transition: background 750ms ease-in-out;
  user-select: none;
  z-index: 100;
}

.menu-open #menu-button {
  background: rgba(41, 37, 47, 0);
}

.hamburger {
  position: relative;
  width: 25px;
  height: 20px;
  transition: transform 750ms ease-in-out;
}

#menu-button:active .hamburger {
  transition: transform 50ms;
  transform: scale(.95);
}

.hamburger::before,
.hamburger::after,
.hamburger .inner {
  content: '';
  position: absolute;
  width: 25px;
  height: 2px;
  background: #ccc;
  transform-origin: 100% 50%;
  transition: all 750ms ease-in-out;
}

.hamburger::before {
  top: -1px;
}

.hamburger .inner {
  top: 9px;
  transform-origin: 50% 50%;
}

.hamburger::after {
  top: 19px;
}

.menu-open .hamburger {
  transform: rotateY(-180deg);
}

.menu-open #menu-button:active .hamburger {
  transform: scale(.95) rotateY(-180deg);
}

.menu-open .hamburger::before,
.menu-open .hamburger::after,
.menu-open .hamburger .inner {
  background: rgba(41, 37, 47, 1);
}

.menu-open .hamburger::before {
  transform: translate3d(-4px, 1px, 0) rotateZ(-45deg);
}

.menu-open .hamburger .inner {
  transform: rotateY(-90deg);
  transition: transform 375ms, background-color 750ms ease-in-out;
}

.menu-open .hamburger::after {
  transform: translate3d(-4px, -1px, 0) rotateZ(45deg);
}

#menu-button {
  border: 2px solid rgba(41, 37, 47, .3);
  background: rgba(41, 37, 47, 1);
  padding: 14px;
  position: absolute;
  top: 20px;
  right: 20px;
  @include transition(background 750ms ease-in-out);
  user-select: none;
  cursor: pointer;
  z-index: 1000;
}

.menu-open #menu-button {
  background: rgba(41, 37, 47, 0);
}

.hamburger {
  position: relative;
  width: 25px;
  height: 20px;
  @include transition(transform 750ms ease-in-out);
}

#menu-button:active .hamburger {
  @include transition(transform 50ms);
  @include transform(scale(0.95));
}

.hamburger::before,
.hamburger::after,
.hamburger .inner {
  content: '';
  position: absolute;
  width: 25px;
  height: 2px;
  background: #ccc;
  @include transform-origin(100% 50%);
  @include transition(all 750ms ease-in-out);
}

//positions of the small vertical lines within the hamburger
.hamburger::before {
  top: -1px;
}

.hamburger .inner {
  top: 9px;
  @include transform-origin(50% 50%);
}

.hamburger::after {
  top: 19px;
}

.menu-open .hamburger {
  @include transform(rotateY(-180deg));
}

.menu-open #menu-button:active .hamburger {
  @include transform(scale(0.95) rotate(-180deg));
}

.menu-open .hamburger::before,
.menu-open .hamburger::after,
.menu-open .hamburger .inner {
  background: rgba(41, 37, 47, 1);
}

.menu-open .hamburger::before {
  @include transform(translate3d(-4px, 1px, 0) rotateZ(-45deg));
}

.menu-open .hamburger .inner {
  @include transform(rotateY(-90deg));
  @include transition(transform 375ms, background-color 750ms ease-in-out);
}

.menu-open .hamburger::after {
  @include transform(translate3d(-4px, 1px, 0) rotateZ(45deg));
}

.menu-holder {
  display: inline-block;
  font-family: "Docker", sans-serif;
  font-weight: bold;
  p {
    font-size: 25px;
    position: absolute;
    top: 10px;
    right: 97px;
  }
}
/******************* menu *********************/

nav {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  margin: 0 auto;
  z-index: 100;
}

#box-container {
  position: absolute;
  width: 100%;
  height: 100vh;
  display: table;
  text-align: center;
  font-family: "Docker", sans-serif;
  font-weight: normal;
  font-size: 45px;
}

#row1,
#row2 {
  display: table-row;
}

#row1 div,
#row2 div {
  display: table-cell;
  width: 50%;
  vertical-align: middle;
}

.box {
  height: 50%;
}

.box p {
  cursor: pointer;
}

img {
  margin-bottom: -12px;
}

.temp {
  font-size: 40px;
}

#box1,
#box4 {
  background: #ccdcda;
}

#box2,
#box3 {
  background: #f6f6f6;
}

I have a fixed title, and when I click on the hamburger menu, the overlay of the full-screen menu covers all the elements in the fixed header except the hamburger menu. This works well in firefox, but in all webkit browsers like Chrome, Safari and Opera, the full-screen layout covers the entire fixed header. I tried changing the z-index in a fixed element. In these web browsers, it either covers everything or hides under everything.

What's happening?