DarkxPunk Posted February 6, 2016 Share Posted February 6, 2016 Hey, So I got this to show you: As you can see on the left you have the menu sliding in form nowhere in Safari and on the right sliding in from under the header in Firefox (the desired effect). Attached is my code if anyone can figure out why the massive difference and how I can fix this... I have been toying with z-index and it seems to do nothing. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, user-scalable=no"/> <base href=""> <title>Razno Renovations</title> <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/default5.css" type="text/css" media="screen" charset="utf-8"/> </head> <body> <header> <div class="logo"> <a href=""> <span class="logotype">Razno Renovations</span> </a> </div> <input type="checkbox" id="hamburgerButtonX" role="button" /> <label class="hamburgerLabelX" for="hamburgerButtonX"> <span class="hamburgerX"></span> </label> <nav> <ul> <li id="navAbout"><a href="">Who We Are</a></li> <li id="navServices"><a href="">Our Services</a></li> <li id="navContact"><a href="">Start Your Project</a></li> </ul> </nav> </header> <section></section> <footer></footer> </body> </html> CSS html,body { margin: 0; padding: 0; font-size: 100%; font-size: 10px; font-family: arial,helvetica,sans-serif; background: #c83837; } body { min-width: 32rem; } a,a:link,a:visited,a:hover,a:active { text-decoration: none; color: #c83837; font-size: 1.4rem; } a:link { } a:visited { } a:hover { } a:active { } p,li { margin: 1rem 0; font-size: 1.4rem; color: #fcfcfc; } h2 { margin: 1rem 0; font-size: 1.8rem; color: #c83837; } li { margin: 0 0 0 1.8rem; list-style: disc; } header { width: auto; height: 4em; box-shadow: 0 -0.4rem 2.1rem 0.3rem rgba(0,0,0,0.6); position: fixed; left: 0; right: 0; background: #c83837; } .logo { width: 100%; max-width: 32rem; height: 2.8rem; padding: 0.6rem 0 0.6rem 0; text-align: center; } .logo a { display: inline-block; } .logotype { width: 100%; font-size: 2.4rem; font-weight: bold; color: #fcfcfc; line-height: 2.8rem; display: inline-block; } nav { padding: 1.3rem 0 1.3rem 32rem; width: 100%; height: 4rem; text-align: center; position: absolute; top: 0; right: 0; box-sizing: border-box; } nav ul { display: inline-block; } nav ul li { margin: 0 0.5rem; display: inline-block; } nav ul li a{ display: inline-block; color: #fcfcfc !important; } /* Hamburger Button X */ #hamburgerButtonX { display: none; } #hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX, #hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX::before, #hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX::after { transition: background-color 0s linear 0.2s, top 0.2s linear 0s, transform 0.2s linear 0.4s; } #hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX { background-color: transparent; } #hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX::before { top: 0em; transform: rotate(45deg) scale(0.8); } #hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX::after { top: -0.3em; transform: rotate(-45deg) scale(0.8); } .hamburgerLabelX { display: inline-block; cursor: pointer; } .hamburgerX,.hamburgerX::before,.hamburgerX::after { content: ""; background-color: #fcfcfc; margin: 0; border: 0; border-radius: 25px; padding: 0; width: 2.5em; height: 0.3em; display: block; position: relative; top: 0; left: 0; font-size: 10px; transition: background-color 0s linear 0.4s, top 0.2s linear 0.5s, transform 0.2s linear 0.2s; } .hamburgerX { margin: 0.6em 0; } .hamburgerX::before { top: -0.6em; } .hamburgerX::after { top: 0.3em; } /* Hamburger Button X */ .hamburgerLabelX { position: absolute; top: 1.25rem; right: 4.85rem; z-index: 999; display: none; } @media only screen and (max-width: 767px) { #hamburgerButtonX:checked ~ nav { top: 4rem; } #hamburgerButtonX:checked ~ nav::before { top: -4rem; } #hamburgerButtonX:checked ~ nav, #hamburgerButtonX:checked ~ nav::before { visibility: visible; transition: top 0.6s linear 0s; ; } .hamburgerLabelX { display: block; } nav::before, nav { transition: top 0.6s linear 0s; } nav::before { content: ""; width: 100%; height: 4rem; background: #c83837; position: absolute; visibility: visible; top: 0; left: 0; z-index: 1; } nav { display: block; padding: 1.3rem 0 1.3rem 0; width: 100%; height: 4rem; position: absolute; top: 0rem; right: 0rem; background: #c83837; visibility: visible; box-shadow: 0 0.1rem 2.1rem -0.5rem rgba(0,0,0,0.6); z-index: -2; } } Thanks for any help! Link to comment Share on other sites More sharing options...
dsonesuk Posted February 6, 2016 Share Posted February 6, 2016 (edited) The problem is child elements, normally! can't have z-index lower than parent to force parent overlap, this is true for all browsers EXCEPT Firefox. So you will have to somehow make these elements siblings instead. It is mentioned here http://stackoverflow.com/questions/16083813/z-index-of-elements-in-different-parents-in-chrome Edited February 6, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
dsonesuk Posted February 6, 2016 Share Posted February 6, 2016 This seems to work header:before { box-shadow: 0 -0.4rem 2.1rem 0.3rem rgba(0, 0, 0, 0.6); content: ""; display: block; height: 4rem; left: 0; position: absolute; right: 0; top: 0; } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now