Page 2 of 2 FirstFirst 12
Results 11 to 15 of 15

Thread: z-index works on laptop but not on mobile

  1. #11
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,403
    Thanks
    5
    Thanked 290 Times in 283 Posts

    Default

    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
    ~ the original bald headed old fart ~

  2. #12
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    946
    Thanks
    122
    Thanked 2 Times in 2 Posts

    Default

    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.

  3. #13
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    946
    Thanks
    122
    Thanked 2 Times in 2 Posts

    Default

    Well, I just removed the class ".navbar-area" and it all works fine now ...
    Thanks for the effort, Coothead.

  4. #14
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,403
    Thanks
    5
    Thanked 290 Times in 283 Posts

    Default

    Hi there chechu,

    check out the attachment, it no longer relies upon using z-index.

    coothead
    Attached Files Attached Files
    ~ the original bald headed old fart ~

  5. #15
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    946
    Thanks
    122
    Thanked 2 Times in 2 Posts

    Default

    That's because I had removed the ".navbar-area" in the css.
    All good now, looking good.
    Thanks!

Similar Threads

  1. Are redirects to mobile site causing mobile menu to be inoperable?
    By James F Thoma in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-04-2018, 09:23 PM
  2. Replies: 1
    Last Post: 11-23-2013, 04:30 PM
  3. Mobile 2 Laptop
    By traq in forum Computer hardware and software
    Replies: 2
    Last Post: 07-04-2013, 04:05 PM
  4. Replies: 11
    Last Post: 06-01-2009, 12:12 AM
  5. Every page except index.html works in IE7...
    By paul8agrape in forum CSS
    Replies: 0
    Last Post: 01-22-2007, 04:34 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •