Bootstrap 3 navbar height after resize

Question

Я пытаюсь установить высоту панели навигации на 40 пикселей после изменения размера страницы, но когда я ее поместил и изменил размер веб-страницы, высота навигационной панели выше 40 пикселей, Я пробовал с

@media (min-width:768px){ 
    #barranavegacion{ 
     background-color:#333; 
     border: none; 
     height: 40px; 
    } 
} 

на сайте есть: http://vuelos.gangatravel.es/, чтобы увидеть мою проблему легко после изменения размера страницы.

код Navbar:

<nav class="navbar navbar-inverse navbar-fixed-top" id="barranavegacion" > 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" aria-expanded="false"> 
     <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"> 
      <img style="max-width:100px; margin-top: -7px;" src="http://pixelup.wc.lt/up/img/cc3c887b0f.png" /> 
     </a> 
    </div> 
    <div class="collapse navbar-collapse" id="menu"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a style="font-size: 14pt;" href="#">Vuelos <span class="sr-only">(current)</span></a></li> 
     <li><a style="font-size: 14pt;" href="http://hoteles.gangatravel.es/" target="_blank">Hoteles</a></li> 
     <li><a style="font-size: 14pt;" href="#">Coches</a></li> 
     <li><a style="font-size: 14pt;" href="http://rutas.gangatravel.es/es/s/" target="_blank">Rutas</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="http://www.youtube.es/"><img style="max-width: 30px; max-height: 30px; margin-top: -12px;" src="http://pixelup.wc.lt/up/img/29ed8fbcb8.png"/></a></li> 
     <li><a href="http://www.twitter.es/"><img style="max-width: 30px; max-height: 30px; margin-top: -12px;" src="http://pixelup.wc.lt/up/img/ffb14b6235.png"/></a></li> 
     <li><a href="http://www.facebook.es/"><img style="max-width: 30px; max-height: 30px; margin-top: -12px;" src="http://pixelup.wc.lt/up/img/c38838d8fa.png"/></a></li>  
     <li><a href="https://plus.google.com/"><img style="max-width: 30px; max-height: 30px; margin-top: -12px;" src="http://pixelup.wc.lt/up/img/73a02977d4.png"/></a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

Answer 1

Попробуйте это:

@media (min-width:768px){ 
    #barranavegacion{ 
     background-color:#333; 
     border: none; 
     height: 40px !important; 
     max-height: 40px !important; 
    } 
} 

Answer 2

Проблема возникает с .navbar CSS бутстрапом в: min-height: 50px;

@media (min-width:768px){ 
    #barranavegacion{ 
     background-color:#333; 
     height: 40px; 
     min-height: 40px; 
    } 
} 

ВАЖНОЕ ЗАМЕЧАНИЕ: Это будет делать трюк, но есть более внутренние элементы, такие как container-fluid, который использует min-height: 50px;.