Comment augmenter la hauteur de Navbar Bootstrap 3 tout en gardant la hauteur de menu petite quand s'est effondré

j'essaie d'augmenter la hauteur d'un Bootstrap 3 navbar à 80px, mais je veux garder la min-height originale à 50px, quand le menu s'effondre (i.e. les largeurs d'écran de moins de 768px).

HTML:

<!-- Navigation Bar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<a class="navbar-brand" href="#">Project</a>
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Project</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">Services</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#contact">Support</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
<!-- Navigation Bar End -->
</div>

j'utilise le CSS suivant et j'ai réussi à changer la hauteur navbar, mais la hauteur du menu effondré est toujours à 80px:

.navbar-fixed-top {
min-height: 80px;
}

@media (min-width: 768px) {
.navbar {
border-radius: 4px;
min-height: 50px;
 }
}

enter image description here

22
demandé sur j08691 2013-12-13 00:28:32

2 réponses

j'ai finalement développé une solution moi-même. Vous devez créer une requête média qui garde la hauteur de la ligne du menu s'effondrant à 20px pour les largeurs d'écran jusqu'à 767px. Les CSS suivants dans mon style.la css remplace le boostrap.css et a résolu mon problème:

.navbar-fixed-top {
    min-height: 80px;
}

.navbar-nav > li > a {
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 80px;
}

@media (max-width: 767px) {
    .navbar-nav > li > a {
    line-height: 20px;
    padding-top: 10px;
    padding-bottom: 10px;}
}
54
répondu 2013-12-18 21:11:14

Votre logique est à l'envers. Pour l'instant, il ne s'applique qu'à cette hauteur de 50px pour les pages plus larges que 768px. Cela devrait corriger le problème:

.navbar-fixed-top {
    min-height: 80px;
}

.navbar-fixed-top .navbar-collapse {
    max-height: 80px;
}

@media (min-width: 768px) {
    .navbar-fixed-top .navbar-collapse {
        max-height: 50px;
    }
}
-1
répondu Derek 2013-12-13 02:59:48