Logo plus grand sans affecter d'autres éléments dans la barre de navigation

Question

Mon problème principal est avec un logo. Voici mon élément d'en-tête où j'ai joint ma barre de navigation et mon logo. L'en-tête contient une image de fond et dans lequel j'ai placé ma barre de navigation.

HTML

<div class="header"> 
    <div class="container"> 
     <div class="container"> 
      <nav class="navbar navbar-expand-lg navbar-light bg-faded"> 
       <a class="navbar-brand" href="#"><img src="images/logo.svg" /></a> 
       <button class="navbar-toggler" type="button" data-toggle="collapse" 
         data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" 
         aria-expanded="false" aria-label="Toggle navigation"> 
        <span class="navbar-toggler-icon"></span> 
       </button> 
       <div id="navbarNavDropdown" class="navbar-collapse collapse justify-content-end"> 
        <ul class="navbar-nav "> 
         <li class="nav-item"> 
          <a class="nav-link" href="#">Login</a> 
         </li> 
         <li class="nav-item"> 
          <a class="nav-link" href="#">Register</a> 
         </li> 
        </ul> 
       </div> 
      </nav> 
     </div> 
    </div> 
</div> 

CSS

.navbar-brand > img { 
    width: 100%; 
} 

Il ressemble à ceci: image

Et quand je précise la largeur pour le logo (comme 20em), il devient plus grand mais il se déplace le li articles aussi. Je ne veux pas que mes articles li soient affectés. De plus, je veux que le logo soit réactif lorsque je spécifie la largeur, il reste toujours le même dans les petits écrans.

iamge2

Answer 1

J'ai expérimenté beaucoup avec des tailles de logo sur bootstrap3 navbar . Pour moi cela fonctionne mieux. Premièrement, je donne à la barre de navigation ma hauteur désirée, et définissez la hauteur de la ligne à la même hauteur, de sorte que les liens padding-top et padding-bottom sont fixes (les liens sont centrés verticalement).

.navbar { 
    min-height: 100px; 
} 
ul.navbar-nav > li > a { 
    line-height: 100px; 
} 

La barre de navigation a maintenant une hauteur de 100 pixels. Avec le rembourrage à l'esprit, mon logo devrait maintenant avoir une hauteur maximale de 80px car nous avons besoin de 10px padding-top et 10px pour le padding-bottom. Disons que le logo a une largeur de 200px et une hauteur de 80px, je donne le logo de la classe img.

<a class="navbar-brand" href="#"><img src="#" class="logo" alt=""></a> 

Maintenant gardez le rembourrage à l'esprit, j'ajoute 10px de rembourrage au logo.

img.logo { 
    padding-top: 0px; 
    width: 200px; 
    height: auto; 
} 

Si vous voulez différentes tailles de logo, il suffit de changer la barre de navigation min hauteur/hauteur de ligne et modifier la largeur du logo/rembourrage.

Bootstrap 3 violon: https://jsfiddle.net/yghg5hsx/

Bootstrap 4 violon: https://jsfiddle.net/973Lde7j/3/

Answer 2

mettre votre logo dans un div et le reste du contenu navbar dans un autre div

essayez ceci:

#navbar { width:100%} 

#logoDiv { width:20% } 
#contentDiv { width:80% }