Full screen menu only appears in nav bar

Question

I have got the following html and css. The problem is when it is run the full screen menu only appears in the nav bar. The problem only appears when using safari.

I can solve the problem my getting rid of

.nav {
position: fixed;
}

but I still want the nav bar to be fixed at the top of the page.

 .nav { font-family: Arial-BoldMT; font-size: 16px; list-style: none; text-align: right; padding: 0px 0 0px 0; box-shadow:0px 1px 1px #d3d3d3; background-color: white; width: 100%; z-index:0.1; overflow: auto; position: fixed; top: 0; } .nav p { float: left; margin-left: 40px; color: #333333; } .overlay { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-x: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; } .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: #f1f1f1; } .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } .slider { font-size:30px; cursor:pointer; float:right; margin-right: 40px; } @media screen and (max-height: 450px) { .overlay a {font-size: 20px} .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; } } 

 <div class="nav"> <p>LIAM VINSON</p> <div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div class="overlay-content"> <a href="index.html">HOME</a> <a href="about.html">ABOUT</a> <a href="photography.html">PHOTOGRAPHY</a> <a href="portfolio.html">PORTFOLIO</a> <a href="contact.html">CONTACT</a> </div> </div> <span class="slider" onclick="openNav()">&#9776;</span> <script> function openNav() { document.getElementById("myNav").style.width = "100%"; } function closeNav() { document.getElementById("myNav").style.width = "0%"; } </script> </div> 

Answer 1

z-index:0.1; 

is not valid css.

z-index must be an integer - either negative or positive. Chances are most browsers are just treating it as 0, but Safari don't know what to do with it. So, change it to an integer like

 z-index:1;

and set your overlay to z-index:2 (though I would recommend spacing these numbers out in case you have to index additional elements. ie. z-index:100; and z-index:200;)

Setting it as fixed, with top at 0, should fix it to the top of page for you once you correct that z-index issue you got there.

Answer 2

The problem was

.nav {
overflow: auto;
}

It stopped the overlay from being shown outside of the nav div.