z-index works on laptop but not on mobile

**coothead** · 10-20-2022, 12:39 PM

Hi there chechu,

Maybe there is, somewhere else, an overriding z-index in another div.

Test this code...

Code:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" media="screen">

<style media="screen">
body {
    font: normal 1em / 1.5em  sans-serif;
 }
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 999999999999999; 
  left: 0;
  top: 0;
  background-color: #fff;
  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: 20px;
  color: #818181;
  display: block; 
  transition: 0.3s; 
}
.overlay a:hover, .overlay a:focus {
  color: #696969;
}
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}
.icon-bars:hover {
  cursor: pointer;
}

</style>
</style>

</head>
<body>
   <div id="myNav" class="overlay">
                    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                    <div class="col-lg-12 overlay-content">
                        <div class="row">
                            <div class="col-sm-6">
                                <a href="#">home</a>
                                <a href="#">about</a>
                                <a href="#">recipes</a>
                                <a href="#">workshops</a>
                                <a href="#">catering</a>
                                <a href="#">cookbook</a>
                            </div>
                            <div class="col-sm-6">
                                <a href="#">Persian travel</a></li>
                                <a href="#">Persian UNESCO</a></li>
                                <a href="#">Persian essentials</a></li>
                                <a href="#">Persian events</a></li>
                            </div>
                        </div>
                    </div>
                </div>
                <span onclick="openNav()" class="icon-bars"><i class="fa fa-bars fa-2x"></i></span>
            </div>
        </nav>
    </div>
<script>
        function openNav() {
        document.getElementById("myNav").style.width = "100%";
        }
        function closeNav() {
        document.getElementById("myNav").style.width = "0%";
        }
    </script>

</body>
</html>

If this works in your iPhone 11 Pro Max, then the problem probably lies in one of these files...

Code:

<link rel="stylesheet" href="https://www.parisaspersiankitchen.com/assets/css/vendor.css">
<link rel="stylesheet" href="https://www.parisaspersiankitchen.com/assets/css/style.css">
<link rel="stylesheet" href="https://www.parisaspersiankitchen.com/assets/css/responsive.css">
<link rel="stylesheet" href="https://www.parisaspersiankitchen.com/assets/css/grt-youtube-popup.css">

...rather than in the HTML.

coothead

**chechu** · 10-20-2022, 04:04 PM

I found this

Code:

.navbar-area {
  padding: 0;
  top: 0;
  z-index: 98;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  transition: all 0.4s;
  background: linear-gradient(to right, #5856d5 0%, #ff1d5b 100%);
  padding: 0;
}

I removed z-index there, as there is no position.
But still doesn't work.