Bootstrap Barre de navigation entièrement réactive avec le logo ou le nom de la marque
Je voudrais faire une barre de navigation entièrement réactive avec une hauteur spécifiée sur Twitter Bootstrap 3.1.1, où la marque pourrait consister en une image (logo) ou du texte.
html:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<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="#">
<img src="http://placehold.it/150x50&text=Logo" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
css:
body {
margin-top: 125px;
}
.navbar-fixed-top .nav {
padding: 15px 0;
}
Le problème est qu’une fois que la taille de la fenêtre du navigateur a été réduite et que le menu a été réduit, la barre de navigation a retrouvé sa hauteur initiale et l’image du logo est la suivante:
L'autre problème est que le changement de <img src="http://placehold.it/150x50&text=Logo" alt=""> En <h3>AppName</h3> Fait que AppName n'est pas au milieu:
Actuellement, il est centré en définissant des valeurs de remplissage, mais je ne sais pas comment le rendre indépendant.
Est-ce que quelqu'un pourrait m'aider à résoudre ce problème?
Cordialement
EDIT:
Voici les images préparées d'effet que je veux réaliser:
barre de navigation non effondrée avec l'image du logo:
barre de navigation réduite (même hauteur de barre de navigation, même taille d'image, mais largeur différente od barre de navigation)):
barre de navigation non réduite avec le nom de la marque:
barre de navigation réduite (tout est identique, sauf la largeur de la barre de navigation causée par le changement de largeur de la fenêtre du navigateur):
Si vous voulez atteindre this (vous pouvez redimensionner la fenêtre pour voir comment elle se présentera pour la version mobile), tout ce que vous aurez à faire sera d’avoir 2 images de logo (une pour le bureau et une pour le mobile). et les afficher en fonction de l'environnement en utilisant visible-xs et hidden-xs Des classes.
Donc j'ai utilisé quelque chose comme ça:
<img class="hidden-xs" src="http://placehold.it/150x50&text=Logo" alt="">
<img class="visible-xs" src="http://placehold.it/120x40&text=Logo" alt="">
Et bien sûr, j'ai stylisé le logo du mobile en utilisant:
@media (max-width: 767px) {
.navbar-brand {
padding: 0;
}
.navbar-brand img {
margin-top: 5px;
margin-left: 5px;
}
}
Vous pouvez voir tout le code ici . Au cas où vous auriez besoin d'un texte sur la version mobile avec le logo, ce n'est pas grave. Il suffit de remplacer le logo par un <h1 class="visible-xs">AppName</h3> et changez le style dans la requête multimédia comme ceci:
@media (max-width: 767px) {
.navbar-brand {
padding: 0;
}
.navbar-brand h1{
//here add your style depending of the position you want the text to be placed
}
}
MODIFIER:
Vous avez besoin de ces conditions pour que cela fonctionne:
.navbar-toggle {
margin: 23px 0;
}
.navbar-nav, .navbar-nav li, .navbar-nav li a {
height: 80px;
line-height: 80px;
}
.navbar-nav li a {
padding-top: 0;
padding-bottom:0;
}
Meilleure approche pour ajouter un logo de marque à l'intérieur d'un navbar-inner classe et un conteneur. À propos de <h3> problème <h3> _ possède un certain remplissage dans bootstrap, comme @creimers l'a dit. Et si vous utilisez une image plus grande, augmentez également la hauteur de la barre de navigation ou le logo flottera à l'extérieur.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-inner"> <!--changes made here-->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<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="#">
<img src="http://placehold.it/150x50&text=Logo" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
L'image d'espace réservé que vous incluez a une hauteur de 50px. Il est encapsulé dans une anchor (.navbar-brand) avec un padding-top De 15px Et une hauteur de 50px. C'est pourquoi le logo de marque de réservation sort du bar. Essayez d’inclure une image plus petite ou de jouer avec le rembourrage de l’ancre en lui attribuant un class ou un id auquel vous pouvez faire référence dans votre css.
[~ # ~] éditez [~ # ~] ou supprimez la valeur statique height: 50px de .navbar-brand. Votre barre de navigation prendra alors la taille de son plus grand enfant.
h3 In bootstrap a par défaut un padding-top De 20px. De nouveau, il est encapsulé avec cette ancre padding-top: 15px. C’est pourquoi il n’est pas centré verticalement comme vous le souhaitez. Vous pouvez attribuer au h3 Un class ou et id qui réinitialise le haut de la marge. le padding du anchor.
Voici quelque chose à jouer avec: http://jsbin.com/jelec/1/edit?html,output
J'ai vérifié et cela a fonctionné pour moi.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-top:100px;"><!--style with margin-top according to your need-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Il suffit de définir la hauteur et la largeur où vous ajoutez ce logo. J'ai essayé et ça marche bien