My bootstrap 4 website () is experiencing an issue with the navbar on Apple mobile devices. On the home page, the navbar doesn't push all the content down, causing some menu items to overlap with the content below. On the "ponentes" page, the content does not get pushed down at all.
Here is the HTML for my home page:
<body>
<div class="outer">
<nav class="navegacion navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="https://sedomadrid2021.com">
<img src="/img/logo.png" alt="logo" height="110px">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item active mr-5 ml-5">
<a class="nav-link btnreg" href="https://sedomadrid2021.com">Inicio <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item mr-5 ml-5">
<a class="nav-link btnreg" href="https://sedomadrid2021.com/ponentes">Ponentes<span class="sr-only"></span></a>
</li>
<li class="nav-item mr-5 ml-5">
<a class="nav-link btnreg" href="https://sedomadrid2021.com/CartaSEDO.pdf">Infórmate</a>
</li>
<li class="nav-item mr-5 ml-5">
<a class="nav-link btninscrib" href="https://atlanta.eventszone.net/myCongress/form.php?thisFormCongress=sedo21&thisFormLanguage=es">Inscríbete</a>
</li>
</ul>
</div>
</nav>
<div class="contenedor-principal">
<div class="contenedor-texto-principal">
<span class="texto-titulo-principal">
¿Te lo vas<br>a perder?<br>
</span>
<span class="texto-parrafo-principal">
<br>El 67º congreso de la sedo 2021 en Madrid congregará a los mejores profesionales de la ortodoncia de España en un evento de reencuentro cooperación y conocimiento
</span>
</div>
<div class="contenedor-bocadillo">
<img class="fondo-bocadillo" src="/img/bocadillo.png" alt="fondo-texto">
<span class="texto-bocadillo">Que no te<br>lo cuenten</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
And this is the HTML for the "ponentes" page:
<... (This part of the text has not been changed) ...>Here is the CSS being used:
<... (This part of the text has not been changed) ...>The issue is specifically happening on mobile Apple devices, while other devices and desktops display the content correctly. Feel free to visit the site directly to replicate the issue.