所以我正在处理这个页面,我正在设计移动版本,但我遇到了一个问题。当我点击 iPhone 上的汉堡菜单时,导航栏品牌和汉堡菜单所在的导航栏消失了。我不能折叠汉堡包,它只是隐藏了。下拉也不是在正确的位置,它溢出到页面的顶部。
<header>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark navBar">
<div class="container">
<a class="navbar-brand minecraftFont" href="#" style="font-size: 18px; margin-top: 4px;">
<img src="img/logo.png" class="logoFilter" style="width: 45px;" alt="">
RayCraft
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#raycraft-navbar" aria-controls="raycraft-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse mobileNavbar" id="raycraft-navbar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item font-17">
<a class="nav-link navLink" href="#">Store</a>
</li>
<li class="nav-item font-17">
<a class="nav-link navLink" href="#">Servers</a>
</li>
<li class="nav-item font-17">
<a class="nav-link navLink" href="#">News</a>
</li>
<li class="nav-item font-17">
<a class="nav-link navLink" href="#">Rules</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="d-flex justify-content-sm-end justify-content-center align-items-center darkmodeLi">
<div class="d-flex justify-content-center align-items-center darkmode" style="width: 40px; height: 100%;">
<svg>
<path />
</svg>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">English</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div id="toHun" class="dropdown-item langButtons">Magyar</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
如您所见,如果我单击汉堡按钮,导航栏会显示,但位置非常错误。我尝试向 .mobileNavbar 添加边距(折叠导航栏折叠),得到以下结果。
正如我们所见,位置现在可以了,但导航栏仍然没有显示,而且在 android 上看起来很糟糕。
在带有开发人员选项的 Chrome 桌面上,选择 iPhone X 分辨率,网站如下所示:
感谢任何帮助