Как мне сделать так, чтобы моя навигационная панель работала как на android, так и на ios?

Question

Я застрял с этой проблемой весь день, у меня есть навигационная панель, она отлично работает на chrome и android, при использовании IOS (iphone, ipad или что-нибудь), как-то она ломается, выпадающее меню должно показывать go вниз, но оно поднимается и переполняет экран. Вот несколько примеров: пример 1

пример 2

Вот мой код html: `

<link href="../nav.css" rel="stylesheet" type="text/css">
<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-white" style="width:100%;" id="mainNav">
    <div class="container teste_responsivo">
        <a class="navbar-brand js-scroll-trigger"  href="<?php echo $root >/">
            <div class="logo_soul" style="min-width: 175px"></div>

        </a>
        <button class="navbar-toggler navbar-toggler-right"  type="button" data-toggle="collapse"
                data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
                aria-label="Toggle navigation">
            Menu
            <i class="fa fa-bars"></i>
        </button>
<div class="collapse navbar-collapse colapser" id="navbarResponsive">
            <ul class="navbar-nav ml-auto text-center">
                <li class="row empes" style="z-index: 0; background-color:#fff; margin-bottom:10px;">
                    <div class="col-6">
                        <a href="<?php echo $root ?>/pages/empresa/" class="nav-link menubtn abc123">Empresa</a>
                    </div>
                    <div class="col-6">
                        <a href="<?php echo $root ?>/pages/pessoal/" class="nav-link float-md-right abc123 menubtn">Pessoal</a>
                    </div>
                </li>
                <li class="nav-item x" style="z-index: 2;">
                    <br>
                    <a class="nav-link js-scroll-trigger" href="<?php echo $root ?>/pages/aplicativomobilesoul.php">Baixar&nbspApp</a>
                 </li>
                <li class="nav-item x" style="z-index: 2">
                    <br>
                    <a class="nav-link" href="<?php echo $root ?>/pages/sobre.php">Quem&nbspSomos</a>

                </li>

                <li class="nav-item x" style="z-index: 2">
                    <br>
                    <a class="nav-link" href="https://www.soul.med.br/blog" target="_blank">Blog&nbspda&nbspSOUL</a>
                </li>

                <li class="nav-item x" style="z-index: 2">
                    <br>
                    <a class="nav-link" href="https://soulmed.tech/" target="_blank">Credenciar&nbspProfissional</a>
                </li>
                <!--<li class="nav-item x" style="z-index: 2">
                    <br>
                    <a class="nav-link" href="<?php /*echo $root */?>/pages/videos.php">Vídeos</a>
                </li>-->
                <li class="nav-item x">
                    <br>
                    <a class="nav-link js-scroll-trigger" href="#contato">Contato</a>
                </li>
                <li class="nav-item x">
                    <br>
                    <a class="nav-link" href="<?php echo $root ?>/pages/faq.php">Dúvidas</a>
                </li>

                <li class="nav-item" style="background-color:#fff;">
                    <a class="nav-link menubtn" href="<?php echo $root ?>/mobile/">Área&nbsprestrita</a>
                    <a class="nav-link menubtn" href="<?php echo $root ?>/pages/rede.php">Onde&nbspUsar</a>
                    <a class="nav-link menubtn" href="http://www.soul.med.br/pages/pessoal/recarga.php">Recarga&nbspCartão</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

`

А вот css делает его« отзывчивым »:`

@media screen and (min-width: 360px) and (max-width: 410px){
.empes
{
width: 110%;
margin-left: -20px;
}
.nav-item
{
margin-left: -18px;
width: 110%;
}
}

@media screen and (max-height: 568px) 
    {
      .colapser
      {
        max-height: 530px !important;
        font-size: 11px !important;
      }
      .nav-link
      {
        font-size: 12px !important;
      }
      .nav-item
      {
        margin-left: -18px;
        width: 112%;
      }
}
@media screen and (min-width: 411px) and (max-width: 425px) 
    {
        .empes
        {
        margin-left: -23px;
        }
        .nav-item
        {
          margin-left: -19px;
          width: 110%;
        }
    }
@media screen and (width: 768px) 
    {
      .empes
      {
        width: 775px;
        margin-left: -28px;
      }
      .nav-item
      {
        margin-left: -28px;
        width: 775px;
      }

    }`

Answer 1

Я только что изменил `

<div class="container teste_responsivo">
        <a class="navbar-brand js-scroll-trigger"  href="<?php echo $root >/">
            <div class="logo_soul" style="min-width: 175px"></div>

        </a>
        <button class="navbar-toggler navbar-toggler-right"  type="button" data-toggle="collapse"
                data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
                aria-label="Toggle navigation">
            Menu
            <i class="fa fa-bars"></i>
        </button>

to:

<div class="container teste_responsivo">
        <a class="navbar-brand js-scroll-trigger"  href="<?php echo $root >/">
            <div class="logo_soul" style="min-width: 175px"></div>

        </a>
        <button class="navbar-toggler navbar-toggler-right"  type="button" data-toggle="collapse"
                data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
                aria-label="Toggle navigation">
            Menu
            <i class="fa fa-bars"></i>
        </button>
</div>

`

и вытащил один в конце, который был от контейнера div на верх, а после этого просто поправил мой отзывчивость.

Answer 2

если вам нужен ответственный navbar, вам, вероятно, следует удалить эти поля и добавить flex-элементы, иначе ваш navbar все испортит. Смотреть это видео