如何让我的导航栏同时在 android 和 ios 上工作？

Question

I'm stuck with this problem all day, I have a navbar, it works fine on chrome and android, when using IOS(iphone, ipad or anything), somehow it breaks apart, the dropdown menu should go dow but it goes up and overflows the screen. Here are some examples: example 1

example 2

Here is my html code:`

<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>

`

And here is the css making it "responsive":`

@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

if you want responsible navbar, you should probably remove those margins and add flex elements, or your navbar will ruin everything. Watch this video

Answer 2

I just changed `

<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>

`

and taked out one at the end that was from to the container div on the top, and after that just adjusted my responsive.