Icône Navbar effondrée ne répondant pas UNIQUEMENT sur de très petits écrans

Question

Ma barre de démarrage bootstrap-4 avec le "hamburger" dans le coin supérieur droit de l'écran était basée sur l'un des exemples de bootstrap. effondrements et icône cliquable les deux fonctionnent bien, jusqu'à ce que l'écran devient très faible (taille de téléphone), puis il cesse de répondre ...

Observations:

1. Juste avant qu'il cesse de fonctionner, le menu apparaît toujours lorsque vous cliquez juste à côté de l'icône, il semble donc qu'un élément glisse au-dessus de l'icône lorsque l'écran devient plus petit.
2. Lorsque je supprime navbar-toggler-right, l'icône se déplace vers le coin supérieur gauche et tout fonctionne bien ...
3. Le même problème se produit sur toutes les pages, il ne semble pas être un élément extérieur de la barre de navigation.

Réglage z = 999 sur les <button> œuvres, mais pas très propre ...

La barre de navigation:

<nav> 
<div class="navbar navbar-toggleable-sm transparent navbar-inverse fixed-top" style="position: absolute!important;"> 
    <button type="button" class="navbar-toggler navbar-toggler-right collapsed" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="container"> 
    <!-- Brand --> 
    <a class="navbar-brand" href="/"> 
     <img src="{{ asset('logo-white.png') }}" width="35" height="35" alt=""> 
    </a> 

    <div class="navbar-collapse collapse" id="navbar"> 
     <ul class="navbar-nav mr-auto"> 
     <li class="nav-item"> 
      <a class="nav-link" href="/">Home</a> 
     </li> 
     <li class="nav-item"> 
      etc ... 
     </li> 
    </ul> 

    <!-- Right side (author) --> 
    <ul class="navbar-nav ml-auto"> 
    <!-- Authentication Links --> 
    @if (Auth::guest()) 
     <li class="nav-item"> 
     <a href="{{ route('login') }}" class="nav-link">Inloggen</a> 
     </li> 

     <li class="nav-item"> 
     <a href="{{ route('register') }}" class="nav-link">Registreren</a> 
     </li> 

    @else 
     <li class="nav-item"> 
     <a href="{{ url('/authors') }}/{{ Auth::id() }}" class="nav-link"> 
      <span class="fa fa-user" style="font-size: 20px;"></span> 
     </a> 
     </li> 

     <li class="nav-item"> 
     <a href="{{ route('logout') }}" class="nav-link" 
      onclick="event.preventDefault(); 
        document.getElementById('logout-form').submit();"> 
      <span class="fa fa-sign-out" style="font-size: 20px;"> 

      </span> 
      </a> 

      <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> 
       {{ csrf_field() }} 
      </form> 
      </li> 
       @endif 
      </div> 
      </div> 
     </li> 
     </ul> 
    </div> 
    </div> 
</div> 
</nav> 

Toute aide est grandement appréciée!

Answer 1

Je suppose que vous êtes sur une version alpha de Bootstrap, ce qui pourrait être la cause. Ils ont récemment released the beta qui devrait être plus stable. Dans la dernière version, ils ont remplacé navbar-toggleable-* par navbar-expand-*. On dirait qu'ils ont également supprimé navbar-toggler-right. Il devrait s'asseoir sur la droite par défaut.