Comment réparer les éléments de la barre de navigation qui se chevauchent sur un petit écran créé à l'aide de bootstrap?

Question

Navbar nom de marque et le bouton qui se chevauchent

Ceci est ther résultat souhaité sur le petit écran

code barre de navigation

<nav class="navbar navbar-default micah-navbar-bg"> 
    <div class="navbar-header"> 
    <a class="navbar-brand navbar-brand-left" href="#"> <img src="/sites//cologo.png" alt="logo"></a><p style="display:inline-block;">Company name</p> 
    <button id="quickLinksbtn" type="button" class="btn btn-danger ">QUICK LINKS</button> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    </div> 
    <div class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li> 
    </ul> 
    <div class="navbar-header navbar-right"> 
     <p class="navbar-text"> 
     <a href="#" class="navbar-link">Username</a> 
     </p> 
    </div> 
    </div> 
</nav> 

Css pour des liens rapides

#quickLinksbtn{ 
position: absolute; 
right: 100px; 
margin-top: 45px; 
border-radius: 0px; 
} 

Answer 1

Il y a une confusion qui pourrait survenir. Le carré des "liens rapides" ne pourra pas rester de la même taille, ni le logo, ni le bouton de navigation.

C'est pourquoi ils se chevauchent.

Personnellement: Je voudrais juste construire une version mobile du site exactement comment vous voulez qu'il regarde sur mobile et tout mettre dans un div et avoir ce div "display: none" sur quelque chose de plus grand que 800px. Et "display: block" sur tout ce qui est plus petit que ça.

De même votre section de navigation de bureau serait le contraire.

@media screen and (max-width: 800px) { 
    .mobile-nav{display:block;} 
    .desktopnav{display:none;} 
} 

@media screen and (min-width: 801px) { 
    .mobile-nav{display:none;} 
    .desktopnav{display:block;} 
}