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?


Comments

Post a Comment

Popular posts from this blog

c# - Better 64-bit byte array hash -

-
i need hash algorithm produces 64-bit hash code ( long ) fewer collisions string.gethashcode() , fast (no expensive calls cryptographic functions). here's implementation of fnv still shows 3% of collisions after testing 2 million random strings. need number way lower. void main() { const string chars = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz!#@$%^&*()_+}{\":?><,./;'[]0123456789\\"; const int n = 2000000; var random = new random(); var hashes = new hashset<long>(); int collisions = 0; for(int = 0; < n; i++) { var len = random.next(chars.length); var str = new char[len]; (int j = 0; j < len; j++) { str[j] = chars[random.next(chars.length)]; } var s = new string(str); if(!hashes.add(get64bithash( s ))) collisions++; } console.writeline("collision percentage after " + n + " random strings: " + ((doubl
Read more

webrtc - Which ICE candidate am I using and why? -

-
[questions in bold below] i have setup kurento media server 5.1.3 in datacenter behind firewall running os ubuntu 14.04. has 2 network cards: 222.222.222.222 (eth0 - private ip) 111.111.111.111 (eth1 - public ip) attached below sdp (setremotedescription) when browser connected kurento media server type: answer, sdp: v=0 o=- 5487318114793304426 0 in ip4 0.0.0.0 s=kurento media server c=in ip4 0.0.0.0 t=0 0 a=group:bundle audio video m=audio 59068 rtp/savpf 111 0 c=in ip4 111.111.111.111 a=rtpmap:111 opus/48000/2 a=rtpmap:0 pcmu/8000 a=sendrecv a=rtcp:59068 in ip4 111.111.111.111 a=rtcp-mux a=ssrc:669011897 cname:user39019747@host-6e83e4c2 a=extmap:3 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time a=mid:audio b=as:20 a=ice-ufrag:ymdk a=ice-pwd:lylifk5ueqzpwm91ddj37e a=fingerprint:sha-256 ff:0f:81:8c:41:4e:b4:b6:c6:d8:36:f3:d6:5f:09:fd:5f:af:13:b3:9d:fc:12:66:ac:f3:56:d6:5b:0a:73:5d a=candidate:1 1 udp 2013266431 111.111.111.111 55239 typ host a=candidate:2 1 udp
Read more

php - Zend Framework / Skeleton-Application / Composer install issue -

-
i trying create zend framework application using skeleton in netbeans. when run composer install, following error message: "c:\php\php.exe" "c:\composer\composer.phar" "--ansi" "--no-interaction" "update" "--dev" using deprecated option "dev". dev packages installed default now. loading composer repositories package information updating dependencies (including require-dev) requirements not resolved installable set of packages. problem 1 - package requires php >=5.5 php version (5.4.42) not satisfy requirement. problem 2 - installation request zendframework/zendframework 2.5.1 -> satisfiable zendframework/zendframework[2.5.1]. - zendframework/zendframework 2.5.1 requires php >=5.5 -> php version (5.4.42) not satisfy requirement. done. apparently, zend framework only needs php 5.3+ contradicts above. need use php 5.4. my composer.json following: { "name": "
Read more