html - Issues with Fullscreen menu overlay over a fixed navigation -

i m having problem strange. here code pen created show talking about: http://codepen.io/buzzlightyear90/pen/nqyoyk?editors=110

here 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 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: 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 small vertical lines within 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 fixed header , when click on hamburger menu, fullscreen menu overlay covers items within fixed header except hamburger menu. works in firefox in webkit browsers such chrome, safari , opera, full screen layout covers entire fixed header. have tried change z-index in fixed element. in webkit browsers, either covers or hides underneath everything.

what going on?