Я проектировал веб-сайт, но мне не удалось добиться прокрутки navbar на iOS? Он хорошо работает на Android и симуляторе устройств Chrome, но на iOS прокручивается только основной контент.
Я установил фиксированное значение высоты для класса .navbar-collapse, когда его показывают пользователю.
Я также установил высоту наследования и «overflow: auto» для его дочерних элементов: класс navbar-nav.
Вот видео, показывающее проблему https://imgur.com/a/FH40IoS
Пожалуйста, дайте решение. Спасибо за чтение.
<div id="menuContainer" class="container-fluid fixed-top">
<ul id="menuContacto" class="nav justify-content-end">
<li class="nav-item datoMenuContacto">
...
</li>
<li class="nav-item datoMenuContacto">
<a class="nav-link" href="mailto:x@x.com">
<i class="iconoSuperior fas fa-envelope-square"></i>x@x.com
</a>
</li>
<li class="nav-item datoMenuContacto">
...
</li>
<li class="nav-item datoMenuContacto">
...
</li>
</ul>
<nav id="menuPrincipal" class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="/index.html"><img id="logo" src="/img/logo.png" alt="logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navegacionPrincipal" aria-expanded="true"><i class="fas fa-bars"></i></button>
<div id="navegacionPrincipal" class="navbar-collapse collapse show" style="">
<ul class="navbar-nav">
<li class="nav-item active"><a href="/index.html" class="nav-link">Inicio</a></li>
<li class="nav-item"><a href="/nosotros.html" class="nav-link">Nosotros</a></li>
<li class="nav-item"><a href="/tecnologia.html" class="nav-link">Tecnología</a></li>
<li class="nav-item dropdown"><a id="dropdownUsoProductos" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Utilización de productos</a>
<ul id="submenuPrincipal" class="dropdown-menu">
<li class="dropdown-item"><a class="nav-link" href="/residencial.html">Residencial</a></li>
<li class="dropdown-item dropdown-item-expand"><a id="dropDComercial" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Comercial</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="/restaurantes.html">Restaurantes</a>
<a class="dropdown-item" href="/c_comerciales.html">Centros comerciales</a>
<a class="dropdown-item" href="/hoteles.html">Hoteles</a>
<a class="dropdown-item" href="/supermercados.html">Supermercados</a>
</div>
</li>
<li class="dropdown-item dropdown-item-expand"><a id="dropDIndustrial" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Industrial</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="/tabaco.html">Tabaco</a>
<a class="dropdown-item" href="/industria.html">Industria</a>
<a class="dropdown-item" href="/preenfriamiento.html">Preenfriamiento</a>
<a class="dropdown-item" href="/ron_y_vino.html">Ron y vino</a>
<a class="dropdown-item" href="/cuartos_frios.html">Cuartos fríos</a>
<a class="dropdown-item" href="/textil.html">Textil</a>
<a class="dropdown-item" href="/papel_e_imprenta.html">Papel e imprenta</a>
<a class="dropdown-item" href="/madera.html">Madera</a>
<a class="dropdown-item" href="/plantas_tratamiento.html">Plantas de tratamiento</a>
</div>
</li>
<li class="dropdown-item"><a class="nav-link" href="/agricola.html">Agrícola</a></li>
<li class="dropdown-item dropdown-item-expand">
<a id="dropDPecuario" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Pecuario</a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="/avicola.html" class="nav-link">Avícola</a></li>
<li class="dropdown-item"><a class="nav-link" href="/bovino.html">Bovino</a></li>
<li class="dropdown-item"><a class="nav-link" href="/porcino.html">Porcino</a></li>
<li class="dropdown-item"><a class="nav-link" href="/equino.html">Caballería</a></li>
</ul>
</li>
<li class="dropdown-item"><a class="nav-link" href="/entretenimiento.html">Entretenimiento</a></li>
</ul>
</li>
<li class="nav-item dropdown"><a id="dropDProductos" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Productos</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="bombas_nebulizacion.html">Bombas para nebulización</a>
<a class="dropdown-item" href="ventiladores_portatiles.html">Ventiladores portátiles</a>
<a class="dropdown-item" href="ventiladores_pared.html">Ventiladores de pared</a>
<a class="dropdown-item" href="sistemas_esp_niebla.html">Sistemas especiales para niebla</a>
<a class="dropdown-item" href="canones_niebla.html">Cañones de niebla</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="/portafolio.html">Portafolio</a></li>
<li class="nav-item"><a class="nav-link" href="/contacto.html">Contáctenos</a></li>
<li class="nav-item"><a class="nav-link" href="/login.html">Login</a></li>
<li id="contactoMovil" class="nav-item">
<a class="nav-link" href="mailto:infonica@tecnomicroclimas.com">
<img class="icon-contactoMovil" src="/img/icons/mail-ni.png">
</a>
<a class="nav-link" href="Tel: +(505) 8883-1212">
<img class="icon-contactoMovil" src="/img/icons/tel-ni.png">
</a>
</li>
</ul>
</div>
</nav>
</div>```
Este es el CSS que funciona en Android
<!-- language: lang-css -->
@media (max-height:700px) and (max-width: 991px) and (max-resolution: 4dppx) and (orientation: landscape) {
#navegacionPrincipal.show {
height: 80vh;
}
}
@media (max-width: 991px) and (max-resolution: 4dppx) and (orientation: landscape), (max-width: 991px) and (max-resolution: 4dppx) and (orientation: portrait) {
#navegacionPrincipal.show .navbar-nav {
height: 100%;
overflow: scroll;
}
}
<!-- end snippet -->