Navstrap Bootstrap 3 avec logo

376

Je souhaite utiliser la barre de navigation par défaut Bootstrap 3 avec un logo d'image au lieu de la marque de texte. Quelle est la bonne façon de procéder sans causer de problèmes avec différentes tailles d'écran? Je suppose que c'est une exigence courante, mais je n'ai pas encore vu un bon exemple de code. Une exigence clé autre qu'un affichage acceptable sur toutes les tailles d'écran est la possibilité de réduire le menu sur des écrans plus petits.

J'ai essayé de mettre une balise IMG à l'intérieur de la balise A qui a la classe de marque navbar, mais cela a empêché le menu de fonctionner correctement sur mon téléphone Android. J'ai également essayé d'augmenter la hauteur de la classe navbar, mais cela a encore plus foiré les choses.

Soit dit en passant, mon image de logo est plus grande que la hauteur de la barre de navigation.

stepanian
la source
2
<img src="logo.png" width="27px" />: ajuster
Uday Hiwarale
29
Avec toutes les réponses soumises à cette question, pourquoi aucune n'a-t-elle été marquée comme la solution?
Chris22
1
Deux raisons, je pense: 1. Si quelqu'un remodèle le site, la dimension est fixée dans le HTML plutôt que dans le CSS, donc cela crée un cauchemar de maintenance. 2. Ne devrait-il pas être de toute façon height = "27px"? C'est la hauteur, pas la largeur, c'est la contrainte.
Canuck
L'attribut width et height supposent que leur valeur est en pixels, donc vous ne devez pas ajouter 'px' dans la valeur g. width="27"
jmmeijer
Tout bien considéré, c'est la meilleure réponse et doit être acceptée stackoverflow.com/a/26333342/171456 . Il répond aux besoins de la communauté SO plus large qui a visité cette question depuis 2013.
Zim

Réponses:

420

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

OK, d'abord - vous avez besoin d'une image qui s'adaptera à votre barre de navigation. Vous pouvez ajuster votre image via l'attribut de hauteur css (permettant à la largeur de l'échelle) ou vous pouvez simplement utiliser une image de taille appropriée. Quoi que vous décidiez de faire, l'apparence 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 navbar-brand, et ce n'est pas nécessaire. navbar-brandapplique des styles de texte qui ne sont pas nécessaires à une image, ainsi qu'à la navbar-leftclasse (tout comme pull-left, mais pour une utilisation dans une barre de navigation). Tout ce dont vous avez vraiment besoin est d'ajouter navbar-left.

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

Vous pouvez même suivre cela avec un article de marque navbar, qui apparaîtra à droite de l'image.

Michael
la source
43
Je suppose que la raison pour laquelle les gens mettent l'image dans une balise d'ancrage est parce que c'est ainsi que le doc Boostrap le fait: getbootstrap.com/components/#navbar-brand-image
cafonso
9
que faire si vous souhaitez utiliser une image plus grande?
StevenP
5
@cafonso - Je ne dis pas qu'il n'appartient pas à une ancre - juste que l'ancre n'a pas besoin de la classe "navbar-brand". Lorsque cette classe est présente, elle gâche vraiment la façon dont les images sont affichées.
Michael
4
@cafonso fait un bon point. Je crois que TWBS voulait que cela soit utilisé pour une image ou un texte. Et compte tenu du nombre de personnes qui ont eu des problèmes avec cela, cela devrait indiquer qu'il est temps de résoudre ce problème ou de le clarifier dans leurs documents.
Bryan Willis
3
@Michael, les exemples officiels de documentation Bootstrap montrent l'ancre avec la classe navbar-brand. C'est la source de confusion.
Justin Skiles
148
<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>
Vicky
la source
5
à quoi sert la marge négative?
Ayrad
3
La marge négative a aidé à la centrer verticalement pour moi.
mots comme Jared
3
Suite au commentaire d'Edward ... ou au moins une démo de travail
Matías Cánepa
Vous ne devriez pas avoir à jouer avec des marges négatives (sauf si l'image a été recadrée de manière amusante). Cette méthode n'est cependant pas une bonne solution car elle dépend complètement de la taille du logo et devra être ajustée au cas par cas. Voici une démonstration de travail de cette méthode .
Bryan Willis du
1
Une meilleure option qui fonctionnera de manière cohérente quelle que soit la taille / ration du logo est de faire ce que .img-responsive fait sauf l'inverser. Étant donné que .navbar-brand a flotté: appliqué à gauche, il devient un élément de bloc et comme il a une hauteur de 50 pixels, nous pouvons définir la hauteur maximale de l'image à 100%; et il ne débordera JAMAIS ni ne fera croître toute la barre de navigation. Il devient contraint de s'adapter à la hauteur de la marque .navbar. S'il semble trop petit dans la barre de navigation par défaut de 50 pixels, ajustez simplement le rembourrage de la marque .navbar> img en haut et en bas. Voici la réponse complète avec une démo de travail
Bryan Willis
73

Redimensionnement du logo de la barre de navigation Bootstrap 3

DÉMO COMPLÈTE AVEC DE NOMBREUX EXEMPLES

MISE À JOUR IMPORTANTE: 21/12/15

Il y a actuellement un bug dans Mozilla que j'ai découvert qui casse la barre de navigation sur certaines largeurs de navigateur avec BEAUCOUP DE DÉMOS SUR CETTE PAGE . Fondamentalement, le bug mozilla inclut le rembourrage gauche et droit sur le lien de la marque navbar dans le cadre de la largeur de l'image. Cependant, cela peut être résolu facilement et j'ai testé cela et je suis presque sûr que c'est l'exemple de travail le plus stable sur cette page. Il se redimensionne automatiquement et fonctionne sur tous les navigateurs.

Ajoutez simplement ceci à votre css et utilisez la marque navbar de la même manière que vous le feriez .img-responsive. Votre logo s'adaptera automatiquement

.navbar-brand {
  padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
  height: 100%;
  padding: 15px; /* firefox bug fix */
  width: auto;
}

Une autre option consiste à utiliser une image d'arrière-plan. Utilisez une image de n'importe quelle taille, puis définissez simplement la largeur souhaitée:

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  width: 200px;
}


RÉPONSE ORIGINALE CI-DESSOUS (pour référence seulement)

Les gens semblent beaucoup oublier l'ajustement d'objet. Personnellement, je pense que c'est la plus simple à utiliser car l'image s'adapte automatiquement à la taille du menu. Si vous utilisez simplement l'ajustement d'objet sur l'image, il sera automatiquement redimensionné à la hauteur des menus.

    .navbar-brand > img {
      max-height: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
    }

Il a été souligné que cela ne fonctionne pas "encore" dans IE. Il existe un polyfill , mais cela peut être excessif si vous ne prévoyez pas de l'utiliser pour autre chose. Il semble que l'ajustement d'objet soit prévu pour une future version d'IE, donc une fois que cela se produira, cela fonctionnera dans tous les navigateurs.

Cependant, si vous remarquez la classe .img-responsive dans le bootstrap, la largeur maximale suppose que vous placez ces images dans des colonnes ou quelque chose qui a un explicite avec set. Cela signifierait que 100% signifie spécifiquement 100% de largeur de l'élément parent.

    .img-responsive
        max-width: 100%;
        height: auto;
    }

La raison pour laquelle nous ne pouvons pas utiliser cela avec la barre de navigation est que le parent (marque .navbar) a une hauteur fixe de 50 pixels, mais la largeur n'est pas définie.

Si nous prenons cette logique et inversons à être réactif en fonction de la hauteur , nous pouvons avoir une image sensible que les échelles à la hauteur .navbar-marque et en ajoutant et réglage automatique largeur il ajustera à proportion.

max-height: 100%;
width: auto;

Habituellement, nous devrions ajouter display:block;au scénario, mais puisque la marque navbar a déjà flotté: gauche; appliqué, il agit automatiquement comme un élément de bloc.


Vous pouvez rencontrer la situation rare où votre logo est trop petit. L'approche img-responsive ne tient pas compte de cela, mais nous le ferons. En ajoutant également l'attribut "height" au, .navbar-brand > imgvous pouvez être assuré qu'il augmentera aussi bien que bas.

max-height: 100%;
height: 100%;
width: auto;

Donc, pour terminer, je les ai mis ensemble et cela semble fonctionner parfaitement dans tous les navigateurs.

<style type="text/css">
.navbar-brand>img {
   max-height: 100%;
   height: 100%;
   width: auto;
   margin: 0 auto;


   /* probably not needed anymore, but doesn't hurt */
   -o-object-fit: contain;
   object-fit: contain; 

}
</style>

<nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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" href="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
        </div>
        <div id="navbar" class="collapse navbar-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>
      </div>
</nav>

DEMO http://codepen.io/bootstrapped/pen/KwYGwq

Bryan Willis
la source
Merci Jose. Cela ne fonctionne pas dans IE que je ne connaissais pas jusqu'à présent. J'ai édité la réponse de votre commentaire. De plus, je ne sais pas vraiment si la hauteur et la hauteur maximale sont toutes les deux nécessaires.
Bryan Willis
Sûr! L'ajustement d'objet a été l'un des ajouts remarquables du moteur webkit / blink. J'espère que d'autres navigateurs les intégreront bientôt! Pendant ce temps, nous utiliserons des images d'arrière-plan pour travailler dur!
Jose A
1
Hé, Jose vient de comprendre quelque chose. Vérifiez la nouvelle démo. Il semble que ma réponse originale fonctionnait dans tous les autres navigateurs non pas à cause de l'ajustement de l'objet mais à cause de la hauteur et de la hauteur maximale. Je pense que c'est tout ce qui est vraiment nécessaire ... Pouvez-vous trouver une situation où ce qui précède ne fonctionnera pas maintenant?
Bryan Willis
Je ne pense même pas que l'ajustement d'objet soit nécessaire car la hauteur et la hauteur maximales sont redimensionnées à la hauteur du conteneur comme le ferait .img-responsive.
Bryan Willis
Pensez-vous que l'ajustement d'objet fait même quelque chose? Je pense que nous pouvons probablement le laisser tomber dans ce cas, mais je ne suis pas sûr?
Bryan Willis
23

Bien que votre question soit intéressante, je ne m'attends pas à ce qu'il y ait une réponse. Votre question est peut-être trop large. Votre solution doit dépendre de: d'autres contenus dans la barre de navigation (nombre d'articles), les tailles de votre logo, si votre logo réagit, etc. L'ajout du logo dans le a (avec la marque navbar) semble un bon point de départ. Je devrais utiliser la classe navbar-brand car cela ajoutera un rembourrage (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:

entrez la description de l'image ici

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

entrez la description de l'image ici

<768 (menu réduit)

entrez la description de l'image ici

Outre les aspects esthétiques, je n'ai trouvé aucun problème technique. Sur les petits écrans, un gros logo peut se chevaucher ou éclater la fenêtre d'affichage peut-être. Les écrans entre 768 et 992 pixels ont également d'autres problèmes lorsque le contenu ne tient pas dans 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 30 pixels afin que le contenu de votre barre de navigation ne chevauche jamais le contenu de votre page. (les barres de navigation fixes auront des problèmes lorsque la hauteur de la barre de navigation varie).

Vous aurez besoin de quelques requêtes CSS et multimédias pour adapter la barre de navigation à vos besoins sur différentes tailles d'écran. Essayez de restreindre votre question. être décrire le problème que vous avez trouvé sur Android.

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

Sur les écrans plus petits comme un téléphone, le menu réduit apparaît au-dessus du logo

permutez le bouton et le logo dans votre code, logo en premier (position flottante: à gauche sur le logo)

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

réglez le margin-toppour .navbar-collapse ul. Utilisez la hauteur du logo moins la hauteur de la barre de navigation, pour aligner vers le bas ou (hauteur du logo - hauteur de la barre de navigation) / 2 pour centrer

Bass Jobsen
la source
1
J'ai essayé cette option. Les deux problèmes sont les suivants: 1) Sur des écrans plus petits tels qu'un téléphone, le menu réduit apparaît au-dessus du logo (même si j'ajoute une classe sensible à l'img à la balise logo img) et 2) Il n'y a aucun moyen d'aligner le menu articles à tout sauf au sommet. Tout autre réglage entraînerait le fonctionnement du menu réduit.
stepanian
23

Instruction pour créer une barre de navigation bootstrap avec un logo plus grand que la hauteur par défaut (50 px):

Exemple avec un logo 100px x 100px, CSS standard:

  1. Calculez la hauteur et (rembourrage haut + rembourrage bas) du logo. Ici 120px (hauteur 100px + haut rembourrage (10px) + bas rembourrage (10px))

  2. Aller bootstrap / personnaliser . Définissez au lieu de la hauteur de la barre de navigation 50px> 120px (50 + 70) et la hauteur de navbar-collapse-max de 340px à 410px (340 + 70). Téléchargez css.

  3. Dans cet exemple, j'utilise cette barre de navigation . Dans la marque navbar :

      <div class="navbar-header">
        ...
        </button>
        <a class="navbar-brand myLogo" href="#">
          <img src="yourLogo.jpg" />
        </a>
      </div>...

    ajoutez une classe, par exemple myLogo , et un img (votre logo)

    <a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>.

  4. Ajouter CSS

    .myLogo {padding: 10px; }

  5. Convient aux autres tailles.

Exemple

Soleil
la source
1
La solution la plus judicieuse ici. pouce levé
user3718908
1
Ce devrait être la réponse acceptée. Il résout le problème du redimensionnement de la barre de navigation pour l'adapter à l'image.
Greg Gum
14

Eh bien, j'ai finalement réussi à faire fonctionner 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 basé sur du texte, supprimez complètement "navbar-brand" car j'ai trouvé que cette classe particulière était la principale cause de la multiplication par deux de mon menu de navigation.

Criez à user3137032 pour m'avoir conduit dans la bonne direction.

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

Voici le balisage HTML 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 des images de votre 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 devrait être votre seuil et la mienne était la largeur de l'image (368px) + la taille du bouton replié (44px) + environ 60px et elle est sortie à 480px, c'est là que je commence la mise à l'échelle réactive de l'image.

Veuillez vous assurer de supprimer ma syntaxe de rasoir des parties HTML. Faites-moi savoir si cela résout votre problème, il a corrigé le mien.

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

Derek Williams
la source
Ceci est la vraie réponse
StevenP
1
Supprimer la classe l'a navbar-brandfait pour moi.
Kai Hartmann
14

Ma solution est d'ajouter css "display: inline-block" à la balise img.

<img style="display: inline-block; height: 30px; margin-top: -5px">

DÉMO: jsfiddle

Kuofp
la source
13

J'utilise la classe img-responsive, puis je définis une largeur maximale sur l' aélément. Comme ça:

<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%;
}
dustinfarris
la source
2
Je crois que cela signifie que vous définissez la largeur de l'image dans votre <a>balise au lieu de la <img>balise, depuis les img-responsiveensembles max-width="100%". Pouvez-vous expliquer en quoi cela est utile?
Michael Scheper
Michael soulève un bon point. .image-responsiveest destiné au redimensionnement de l'image basé sur un conteneur explicite LARGEUR de l'image et non à la HAUTEUR qui redimensionne en fonction de la largeur. Donc, malgré le nombre de votes positifs, cela n'a pas fonctionné, voir ici . Cependant, nous pouvons utiliser la même méthode que celle sensible à l'image et l'appliquer à la hauteur. Supprimez donc .img-responsive de l'équation et définissez simplement max-height sur navbar-brand . Voir ma réponse ici .
Bryan Willis
5

Vous devez utiliser le code comme ceci:

<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="logo" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style=""
             src="/img/transparent-white-logo.png">
    </a>
</div>

L'étiquette de classe A doit être «logo» et non pas la marque navbar.

NurlanXp
la source
4

Cela dépend de la taille que vous souhaitez que votre logo soit.

La <a>hauteur par défaut dans la barre de navigation est de 20 pixels, donc si vous spécifiez height: 20pxsur votre logo, il s'alignera bien.

Cependant, c'est un peu petit pour un logo, alors j'ai opté pour ceci:

<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="Brand">
        <img style="height: 30px; margin-top: -5px;"
             src="/img/brand.png">
    </a>
</div>

Cela rend l'image haute de 30 pixels et aligne verticalement l'image en ajoutant une marge négative en haut (5 pixels est la moitié de la différence entre le rembourrage sur a et la taille de l'image).

Alternativement, vous pouvez modifier le rembourrage de l' <a>élément, par exemple:

<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="Brand" style="padding-top: 10px; padding-bottom: 10px">
        <img style="height: 30px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>
cwohlman
la source
4

Solution rapide : créez une classe pour votre logoet définissez-la heightsur 28px. Cela fonctionne bien avec la barre de navigation sur tous les appareils. Remarquez que j'ai dit fonctionne "BIEN".

.logo {
  display:block;
  height:28px;
}
Brian Scramlin
la source
3

Mon approche consiste à inclure QUATRE images différentes de tailles différentes pour les téléphones, les tablettes, les ordinateurs de bureau, les ordinateurs de bureau de grande taille, mais ne montrer qu'UNE en utilisant les classes utilitaires réactives de bootstrap, comme suit:

<!--<a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>-->

        <a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/"><img src="/assets/logo-phone.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-sm" href="<?php echo home_url(); ?>/"><img src="/assets/logo-tablet.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-md" href="<?php echo home_url(); ?>/"><img src="/assets/logo-desktop.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-lg" href="<?php echo home_url(); ?>/"><img src="/assets/logo-large.png" alt="<?php bloginfo('name'); ?> Logo" /></a>

Remarque: vous pouvez remplacer la ligne commentée par le code fourni. Remplacez le code php si vous n'utilisez pas wordpress.

Modifier la note 2: Oui, cela ajoute des demandes à votre serveur lors du chargement de la page, ce qui pourrait ralentir un peu, mais si vous utilisez une technique de sprite css en arrière-plan, il est probable que le logo ne s'imprime pas lors de l'impression d'une page et que le code ci-dessus devienne meilleur référencement.

vascorola
la source
Vous pouvez utiliser un seul <a> et avoir seulement 4 <img> différents, un pour chaque taille.
Jonathan Vanasco
@Jonathan Vanasco, je serais intéressé de voir comment vous feriez cela
AdRock
1
supprimez le visible-SIZEde la abalise et placez-le sur la balise img. <a class="navbar-brand"><img class="visible-xs"/><img class="visible-sm"/></a>
Jonathan Vanasco
3

Vous ne devriez pas avoir besoin d'ajouter de CSS supplémentaire, car Bootstrap3 le fournit. A moins que vous ne vouliez l'ajouter. C'est mon code pour mettre le logo à gauche et les liens à droite. Cette navigation est réactive. Apportez des modifications à cela comme bon vous semble.

HTML:

<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:white;">
        <div class="container">
        <a class="navbar-brand" href="#"><img style="   width: 150px;" src="image.jpg" alt="Image text"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
Krista A.
la source
2

Je l'implémente également via la propriété d'arrière-plan css. Il fonctionne sainement dans n'importe quelle valeur de largeur.

.navbar-brand{
    float:left;
    height:50px;
    padding:15px 15px;
    font-size:18px;
    line-height:20px;
    background-image: url("../images/logo.png");
    background-repeat: no-repeat;
    background-position: left center
}
crx4
la source
2

Une autre approche consiste à implémenter la .text-hideclasse intégrée de Bootstrap à côté de .navbar-brandpour remplacer le texte / contenu de la marque par une image d'arrière-plan.

CSS:

.navbar-brand{ 
  background: url(http://example.com/your-logo-here.png) center / contain no-repeat;
  width: 200px;
}

HTML:

<a class="navbar-brand text-hide" href="#">Navbar Brand</a>

Il s'agit d'une méthode très cohérente et maintient votre image centrée. Pour ajuster la taille de l'image, il vous suffit de régler la .navbar-brandlargeur, car la hauteur est déjà définie.

Voici une démo en direct

Bryan Willis
la source
2

J'ai eu le même problème. Je l'ai résolu comme ceci:

<a href="#" class="btn btn-link navbar-btn">
  <img class="img-responsive" src="#">
</a>

Il n'y a pas de classe de marque navbar. Le résultat ressemble à une image de logo qui correspond à la barre de navigation et fonctionne comme un lien. Je recommande également d'utiliser la classe navbar-right pour les éléments de menu afin qu'ils ne descendent pas sous le logo.

<div class="collapse navbar-collapse navbar-right">
  <ul class="nav navbar-nav" role="navigation">
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
  </ul>
</div>
marge
la source
1

C'est peut-être trop simple, mais je viens de copier la ligne de la marque navbar donc il y en a deux, l'image puis le texte.

<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/my-icon.png" width="30" height="25" alt=" "></a>
<a class="navbar-brand" href="index.php">My Brand</a>

Et j'ai créé une image qui tient à l'intérieur de la barre de navigation (environ la moitié de la hauteur).

twiddly
la source
1

Si vous utilisez MOINS, cela fonctionne:

@navbar-height: 150px;
@navbar-brand-vpadding: 10px;

.navbar-brand img {
  height: @navbar-height - @navbar-brand-vpadding * 2;
  position: absolute;
  top: @navbar-brand-vpadding;
}
XåpplI'-I0llwlg'I -
la source
1

Ce code fonctionne parfaitement si vous avez besoin de voir la marque centrée et avec la largeur automatique dans la barre d'outils. Il contient la fonction Wordpress pour obtenir le fichier image du bon chemin:

<a class="navbar-brand page-scroll" rel="home" 
    href="#page-top"  title="Title">
    <img style="height: 100%; width: auto;" 
          src="<?php echo get_template_directory_uri();?>/img/logo.png">

Taras Vovkovych
la source
1

Ajoutez ce qui suit à la .navbar-brandclasse

.navbar-brand
{
  padding: 0px; // this allows the image to occupy all the padding space of the navbar--brand
}

.navbar-brand > img
{
   height: 100%; // set height to occupy full height space on the navbar-brand
   width: auto; // width should be auto to allow img to scale accordingly
   max-height: 100%; // optional
   mrgin: 0 auto; // optional
}
Jose Mhlanga
la source
0

mon code de travail - bootstrap 3.0.3. lorsque navbar-toggle, image du logo d'origine hidden-xs.

    <a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
    </a>

    <a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
    </a>
OpenCode
la source
0

Vous pouvez essayer d'utiliser la requête @media comme ci-dessous.

Ajoutez d'abord une classe de logo, puis utilisez @media pour spécifier la hauteur et la largeur de votre logo par taille d'appareil. Dans l'exemple ci-dessous, je cible des appareils d'une largeur maximale de 320 pixels (iPhone). Vous pouvez jouer avec jusqu'à ce que vous trouviez le meilleur ajustement. Un moyen facile de tester: utilisez Chrome ou Firefox avec l'élément d'inspection. Rétrécissez votre navigateur autant que possible. Observez le changement de taille du logo en fonction de la largeur maximale @media que vous spécifiez. Testez sur iPhone, appareils Android, iPad, etc. pour obtenir les résultats souhaités.

.logo {
  height: 42px;
  width: 140px;
}

@media (max-width:320px) { 
.logo {
  height: 33px;
  width: 110px;
}
}
user3137032
la source
0

Veuillez essayer le code suivant:

<style>
   .navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
   <img src="http://placehold.it/140x34/000000/ffffff/&amp;text=LOGO" alt="">
</a>
Dhaval Solanki
la source
0

A défaut de faire fonctionner l'une des autres réponses dans mon cas (je n'ai probablement pas réussi le test d'intelligence) et après quelques expérimentations, c'est ce que j'utilise (qui je crois est très proche de la valeur par défaut de Bootstrap):

   <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         <div class="navbar-logo">
            <a class="navbar-brand" rel="home" href="@Url.Action("Index", "Home")" title="Home">
               <img src="~/Images/logo.png" class="img-responsive">
            </a>
         </div>
         <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
               <li>@Html.ActionLink("Home", "Index", "Home")</li>
               <li>@Html.ActionLink("Coaching", "Coaching", "Home")</li>
               <li>@Html.ActionLink("Resources", "Resources", "Home")</li>
               <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
               <li>@Html.ActionLink("Blog", "Blog", "Home")</li>
               <li>@Html.ActionLink("About", "About", "Home")</li>
            </ul>
         </div>
      </div>
   </div>

Et dans le fichier CSS, j'ai ajouté ce qui suit:

.navbar-brand {
   padding-top: 5px;
}

.navbar-collapse {
   float: left;
}

.navbar-logo {
   float: left;
}

Notez que @Html.ActionLink()c'est la syntaxe Razor pour une <a>balise. Là où il est dit, @Html.ActionLink(...)remplacez-le simplement par une <a>balise appropriée . De même, là où il est dit, @Url.Action(...)remplacez-le par une URL appropriée (pas de <a>balise dans ce cas).

Manfred
la source
0

Ce n'est pas sémantique, mais j'utilise simplement l' aélément existant , définit une image d'arrière-plan, puis crée plusieurs variations pour une résolution @ 2x, des tailles d'écran plus petites, etc.

Ensuite, vous pouvez utiliser la .text-hideclasse pour obtenir du texte sur la page à la mode. Utilisation simple et efficace mais non appropriée d'une image.

Voici un lien vers la classe d'assistance pour le remplacement de texte:

http://getbootstrap.com/css/#helper-classes

Ken Prince
la source
0

La réponse la plus simple et la meilleure pour cette question est de définir une largeur et une hauteur maximales en fonction de votre logo, l'image sera au maximum de 50 pixels de haut mais pas plus de 200 pixels.

<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>

Cela variera en fonction de la taille de votre logo et des éléments de la barre de navigation dont vous disposez.

Theo Leinad
la source
0
<header class="navbar navbar-inverse header-outer" role="banner">
  <div class="container form-inline">
    <img src="@Url.Content(" ~/Content/img/Logo-Sample.png ")" alt="Image" id="logo" class="img-responsive pull-left" />

    <div class="pull-right padding-top">
      <form class="hidden-xs" role="form">

        <div class="form-group" style="padding-left:10px">
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
        </div>

        <div class="form-group">
          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="form-group navbar-remember">
          <label class="white-font">
            <input type="checkbox" class="white-font"> Remember me
          </label>
        </div>
        <button type="button" class="btn btn-primary form-group" title="Sign In">Sign In</button>
      </form>
    </div>
  </div>

</header>

Veuillez comprendre le code à vos propres efforts: D Voici mon projet de code et il fonctionne déjà :) Voici la capture d'écran.

entrez la description de l'image ici

LYKS
la source
0

Au lieu de remplacer la marque de texte, je me suis divisé en deux lignes comme dans le code ci-dessous et j'ai donné une img-responsiveclasse à l'image ......

<div class="collapse navbar-collapse navbar-ex1-collapse" style="background: #efefef; height:auto;">
  <div class="container" style="margin-bottom:-1px;">
    <div class="row">
      <div class="col-md-3">
        <div id="menubar-logo">
          <a href="index.html"><img src="img/tl_logo.png" class="img-responsive" alt="Triple Luck IT Service Logo"></a>
        </div>
      </div>
      <div class=" col-md-offset-3 col-md-6">

        <ul class="nav navbar-nav">
          <li><a href="index.php" class="active">Home</a></li>
          <li><a href="about_us.php">About Us</a></li>
          <li><a href="contact_us.php">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <!-- end of "row" -->
  </div>
  <!-- end of "container" -->
</div>
<!-- end of "collapse" -->

et en plus, j'ai ajouté les codes css suivants .......

#menubar-logo img {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-right: 10px;
}

Si mon code résout votre problème, c'est mon plaisir .....

IZ
la source
0
 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header" >
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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" href="Default.aspx"> <span> <img alt="Logo" src="Images/shopify-bag.png"height="35" width="40"/></span> Shopping GO</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right"></ul>

// N'oubliez pas d'ajouter bootstrap en tête de votre code.

Ch UmarJamil
la source