Bootstrap 3 Navbar avec logo

Question

Je souhaite utiliser la barre de navigation par défaut de Bootstrap 3 avec un logo en image au lieu d'une marque en texte. Quelle est la meilleure façon de le faire sans causer de problèmes avec les différentes tailles d'écran ? Je suppose que c'est une exigence commune, mais je n'ai pas encore vu un bon exemple de code. En plus d'un affichage acceptable sur toutes les tailles d'écran, il est essentiel de pouvoir réduire la taille du menu sur les écrans plus petits.

J'ai essayé de placer une balise IMG à l'intérieur de la balise A qui contient la classe navbar-brand, mais le menu ne fonctionne pas correctement sur mon téléphone Android. J'ai également essayé d'augmenter la hauteur de la classe de la barre de navigation, mais cela a encore aggravé la situation.

D'ailleurs, l'image de mon logo est plus grande que la hauteur de la barre de navigation.

Answer 1

Pourquoi tout le monde essaie de faire les choses à la dure ? Bien sûr, certaines de ces approches fonctionneront, mais elles sont plus compliquées que nécessaire.

Tout d'abord, vous avez besoin d'une image qui tiendra dans votre barre de navigation. Vous pouvez ajuster votre image à l'aide de l'attribut css height (qui permet de mettre la largeur à l'échelle) ou vous pouvez simplement utiliser une image de taille appropriée. Quoi que vous décidiez de faire, l'apparence de votre barre de navigation dépendra de la taille de votre image.

Pour une raison quelconque, tout le monde veut coller l'image à l'intérieur d'une ancre avec navbar-brand et ce n'est pas nécessaire. navbar-brand applique les styles de texte qui ne sont pas nécessaires à une image, ainsi que l'option navbar-left (tout comme pull-left, mais pour une utilisation dans une barre de navigation). Tout ce dont vous avez besoin est d'ajouter navbar-left .

<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>

Vous pouvez même faire suivre cet élément d'une barre de navigation, qui apparaîtra à droite de l'image.

Answer 2

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style="max-width:100px; margin-top: -7px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

Answer 3

Bien que votre question soit intéressante, je ne pense pas qu'il y ait une seule réponse. Votre question est peut-être trop large. Votre solution devrait dépendre de : l'autre contenu de la barre de navigation (nombre d'éléments), les tailles de votre logo, si votre logo doit être réactif, etc. L'ajout du logo dans la a (avec navbar-brand) semble un bon point de départ. Je devrais utiliser la classe navbar-brand car cela ajoutera un padding (haut / bas) de 15 pixels.

Je teste ce paramètre sur http://getbootstrap.com/examples/navbar/ avec un logo de 300x150 pixels.

Plein écran > 1200 :

entre 768 et 992 pixels (menu non réduit) :

<768 (menu réduit)

En dehors des aspects esthétiques, je n'ai pas trouvé de problème technique. Sur les petits écrans, un grand logo peut empiéter sur la fenêtre d'affichage ou la dépasser. Les écrans entre 768 et 992 pixels ont également d'autres problèmes lorsque le contenu ne tient pas sur une ligne, voir par exemple : https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

La barre de navigation par défaut a L'exemple de barre de navigation par défaut ajoute une marge inférieure de 30px, de sorte que le contenu de votre barre de navigation ne doit jamais chevaucher le contenu de votre page. (Les navbars fixes auront des problèmes lorsque la hauteur de la navbar varie).

Vous aurez besoin de quelques css et media queries pour adapter la barre de navigation à vos besoins sur différentes tailles d'écran. Essayez de préciser votre question, c'est-à-dire de décrire le problème que vous avez rencontré sur Android.

mise à jour voir http://bootply.com/77512 pour un exemple.

Sur les écrans plus petits, comme ceux des téléphones, le menu réduit apparaît au-dessus du logo.

interchangez le bouton et le logo dans votre code, le logo en premier (définissez float:left sur le logo)

Il n'y a aucun moyen d'aligner les éléments du menu sur autre chose que le haut.

fixer le margin-top pour .navbar-collapse ul . Utilisez la hauteur du logo moins la hauteur de la barre de navigation pour l'aligner en bas ou (hauteur du logo - hauteur de la barre de navigation) / 2 pour le centrer.

Answer 4

J'ai finalement réussi à résoudre ce même problème. Voici ma solution et je l'ai testée sur mon site dans les trois principaux navigateurs : Chrome, Firefox, et Internet Explorer.

Tout d'abord, si vous n'utilisez pas de logo textuel, supprimez complètement "navbar-brand". J'ai trouvé que cette classe particulière était la cause principale du doublement de mon menu nav effondré.

Merci à l'utilisateur 3137032 de m'avoir conduit dans la bonne direction.

Vous devez créer un conteneur d'images personnalisé, j'ai appelé le mien "logo".

Voici le balisage HTML du bootstrap :

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="@Url.Action(" Index ", "Home ")" class="logo"><img src="~/resources/images/Logo_Concept.png" /></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="@Url.Action(" About ", "Home ")">
            <i class="glyphicon glyphicon-info-sign"></i> About
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Contact ", "Home ")">
            <i class="glyphicon glyphicon-phone"></i> Contact
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Index ", "Products ")">
            <i class="glyphicon glyphicon-tag"></i> Products
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Et le code CSS :

.logo img {
width: 100% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 100%;
}

@media (max-width:480px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70% !important;
}
}

@media (max-width:400px) { 
.logo img {
    width: 75% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 75%;
}
}

@media (max-width:385px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70%;
}
}

@media (max-width:345px) { 
.logo img {
    width: 65% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 65%;
}
}

@media (max-width:335px) { 
.logo img {
    width: 60% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 60%;
}
}

@media (max-width:325px) { 
.logo img {
    width: 55% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 55%;
}
}

@media (max-width:315px) { 
.logo img {
    width: 50% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 50%;
}
}

La valeur dans @media (max-width : x) peut varier en fonction de la largeur de vos images de logo, la mienne est de 368px. Les pourcentages peuvent également devoir être modifiés en fonction de la taille de votre logo. La première requête @media doit être votre seuil et le mien était la largeur de l'image (368px) + la taille du bouton réduit (44px) + environ 60px et il est arrivé à 480px qui est l'endroit où je commence la mise à l'échelle de l'image réactive.

Assurez-vous d'enlever ma syntaxe de rasoir des portions HTML. Faites-moi savoir si cela règle votre problème, cela a réglé le mien.

Edit : Désolé, j'ai manqué votre problème de hauteur de la barre de navigation. Il y a plusieurs façons de procéder. Personnellement, je compile le fichier LESS de Bootstrap avec la hauteur appropriée de la barre de navigation, pour mes besoins, j'utilise 70px, et la hauteur de mon image est de 68 px. La deuxième façon de procéder est dans le fichier bootstrap.css lui-même, recherchez ".navbar" et modifiez min-height : à la hauteur de votre logo.

Answer 5

J'utilise la classe img-responsive, puis je fixe une largeur maximale à l'écran. a élément. Comme ceci :

<nav class="navbar">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <img class="img-responsive" src="mylogo.png">
        </a>
    </div>
</nav>

et le CSS :

.navbar-brand {
    max-width: 50%;
}