我的网站上有固定的底部移动导航。当您单击汉堡包图标时，它会通过增加宽度来用JS调用左侧导航div。
在任何类型的手机中，一切都很好，但是在iPhone中，我什至看不到底部固定的导航栏。有一个代码溢出-x：hidden，这使左侧的选项卡式内容被隐藏，因此，直到您按下汉堡包图标，您才看不到左侧的选项卡式菜单。当我删除此代码时，菜单会在Iphones中显示，但它看起来很糟糕，因为我看到了左侧菜单的一部分。我怎样才能解决这个问题？请检查照片，您会看到。
https://codepen.io/ouz-kaan-yataan/pen/jOWWOzo
这是实时示例，因此，如果使用Iphone打开此链接，则不会看到移动底部固定的导航栏。但是任何其他设备都会显示它。您可以调整浏览器窗口的大小，以便看到导航栏。
<div id="mySidenav" class="sidenav">
<!-- MOBİL MENÜ İÇ TABLAR BAŞLANGIÇ -->
<div class="page-border"></div>
<div class="tabs"><!--tablar başlangıç-->
<nav class="tabs-nav">
<ul>
<li style="border-right:1px solid #554545;" data-tab="1">
<img class="mobilmenuicikonlar" src="assets/img/mobilmenuikonlari/sporlar.png"
border="0" alt=""/><a class="nav-link" href="#">Spor</a>
</li>
<li style="border-right:1px solid #554545;" data-tab="2">
<img class="mobilmenuicikonlar" src="assets/img/mobilmenuikonlari/canli.png"
border="0" alt=""/><a class="nav-link" href="#">Canlı</a>
</li>
<li style="" data-tab="3">
<img class="mobilmenuicikonlar" src="assets/img/mobilmenuikonlari/casino.png"
border="0" alt=""/><a class="nav-link" href="#">Casino</a>
</li>
<li style="border-right:1px solid #554545; border-top:1px solid #554545;" data-tab="4">
<img class="mobilmenuicikonlar" src="assets/img/mobilmenuikonlari/canlicasino.png"
border="0" alt=""/><a class="nav-link" href="#">Canlı Casino</a>
</li>
<li style="border-right:1px solid #554545; border-top:1px solid #554545;" data-tab="5">
<img class="mobilmenuicikonlar" src="assets/img/mobilmenuikonlari/poker.png"
border="0" alt=""/><a class="nav-link" href="#">Poker</a>
</li>
<li style="border-top:1px solid #554545;" data-tab="6">
<img class="mobilmenuicikonlar" src="assets/img/mobilmenuikonlari/promosyonlar.png"
border="0" alt=""/><a class="nav-link" href="#">Promosyonlar</a>
</li>
</ul>
</nav>
<div class="tab-container"><!--tab container başlangıç-->
<div class="tab-content" data-tab="1"><!--tab içerik başlangıç-->
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 1. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 1. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 1. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 1. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 1. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 1. TAB MENÜSÜ</a></span></li>
</div><!--tab içerik bitiş-->
<div class="tab-content" data-tab="2"><!--tab içerik başlangıç-->
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 2. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 2. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 2. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 2. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 2. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 2. TAB MENÜSÜ</a></span></li>
</div><!--tab içerik bitiş-->
<div class="tab-content" data-tab="3"><!--tab içerik başlangıç-->
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 3. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 3. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 3. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 3. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 3. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 3. TAB MENÜSÜ</a></span></li>
</div><!--tab içerik bitiş-->
<div class="tab-content" data-tab="4"><!--tab içerik başlangıç-->
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 4. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 4. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 4. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 4. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 4. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 4. TAB MENÜSÜ</a></span></li>
</div><!--tab içerik bitiş-->
<div class="tab-content" data-tab="5"><!--tab içerik başlangıç-->
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 5. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 5. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 5. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 5. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 5. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 5. TAB MENÜSÜ</a></span></li>
</div><!--tab içerik bitiş-->
<div class="tab-content" data-tab="6"><!--tab içerik başlangıç-->
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 6. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 6. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 6. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 6. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 6. TAB MENÜSÜ</a></span></li>
<li class="mobilmenuicliste" ><img class="mobilmenulisteikonlar" src="assets/img/spor.png"><span><a href="#"> 6. TAB MENÜSÜ</a></span></li>
</div>
<!--tab container bitiş-->
</div><!--tablar bitiş-->
</div>
<!-- MOBİL MENÜ İÇ TABLAR BİTİŞ -->
<!-- MOBİL MENÜ ALT BAR BAŞLANGIÇ -->
<header style="" class="header">
<div class="container">
<nav class="bottom-nav">
<div class="bottom-nav-item active" style="width:0;">
<div class="bottom-nav-link">
<span id="hamburger" style="font-size:30px; cursor:pointer" onclick="openNav()">☰</span>
<span id="kapatici" style="font-size:30px; cursor:pointer" onclick="closeNav()">×</span>
</div>
</div>
<div class="bottom-nav-item">
<div class="bottom-nav-link">
<img id="up" src="assets/img/mobilmenuikonlari/hesabim.png">
<a>Hesabım</a>
</div>
</div>
<div class="bottom-nav-item">
<div class="bottom-nav-link">
<img id="up" src="assets/img/mobilmenuikonlari/kurallar.png">
<a>Kurallar</a>
</div>
</div>
<div class="bottom-nav-item">
<div class="bottom-nav-link">
<img id="up" src="assets/img/mobilmenuikonlari/oranlar.png">
<a>Oranlar</a>
</div>
</div>
<div class="bottom-nav-item">
<div class="bottom-nav-link">
<img id="up" src="assets/img/mobilmenuikonlari/destek.png">
<a>Destek</a>
</div>
</div>
</nav>
</div>
css是
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #1c1919; /* Black*/
overflow-x:hidden;
transition: 0s; /* no transition effect to slide in the sidenav */
}
而JS是
/* Set the width of the side navigation to 100% */
function openNav() {
document.getElementById("mySidenav").style.width = "100%";
document.getElementById("kapatici").style.display = "block";
document.getElementById("hamburger").style.display = "none";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("kapatici").style.display = "none";
document.getElementById("hamburger").style.display = "block";
}