Disminuir la altura de la barra de navegación bootstrap 3.0

Estoy tratando de disminuir la altura de la barra de navegación de bootstrap 3.0 que se usa con un comportamiento superior fijo. Aquí estoy usando código.

HTML

<div class="tnav">
<div class="navbar navbar-fixed-top" role="banner">
    <div class="navbar-inner-sm">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-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>
    <nav class="collapse navbar-collapse" role="navigation">
      <ul class="nav navbar-nav pull-right">
        <li class="active">
          <a href="../getting-started">Getting started</a>
        </li>
        <li>
          <a href="../css">Ext01</a>
        </li>
        <li>
          <a href="../components">Language</a>
        </li>
        <li>
          <a href="../javascript">My Account</a>
        </li>
        <li>
          <a href="../customize">Sign Out</a>
        </li>
      </ul>
    </nav>
  </div>
    </div>
</div>

CSS

.tnav .navbar { background:#F06; height:30px; }
.navbar-inner-sm{background-color: #282828;padding: 1px 20px;background-repeat: repeat-x;-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);background-image: linear-gradient(top, #333333, #222222);}
.navbar-inner-sm .nav {position: relative;left: 0;display: block;float: left;margin: 0 10px 0 0;}
.navbar-inner-sm .nav.pull-right {float: right;}
.navbar-inner-sm .nav > li {display: block;float: left;}
.navbar-inner-sm .nav > li > a {float: none;padding: 4px 5px;line-height: 19px;color: #999999;text-decoration: none;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);}
.navbar-inner-sm .nav > li > a:hover {background-color: transparent;color: #ffffff;text-decoration: none;}
.navbar-inner-sm .nav .active > a,.navbar .nav .active > a:hover {color: #ffffff;text-decoration: none;background-color: #003753;}
.navbar-inner-sm .divider-vertical {height: 27px;width: 1px;margin: 0 9px;overflow: hidden;background-color: #282828;border-left: 1px solid #3f3f3f; border-right: 1px solid #161616;}
.navbar-inner-sm .nav.pull-right {margin-left: 10px;margin-right: 0;}

Resultado

En la pantalla que muestra, la barra de navegación disminuyó en la salida pero la altura no disminuyó. La altura original se muestra en color rosa.

El script css anterior casi funciona bien en bootstrap 2. *

¿Hay alguna forma de disminuir la altura correctamente?

Después de pasar unas horas, agregar la siguiente clase css solucionó mi problema.

Trabaja con Bootstrap 3.0. *

.tnav .navbar .container { height: 28px; }

Trabajar con Bootstrap 3.3.4

.navbar-nav > li > a, .navbar-brand {
    padding-top:4px !important; 
    padding-bottom:0 !important;
    height: 28px;
}
.navbar {min-height:28px !important;}

Actualice el código completo para personalizar y disminuir la altura de la barra de navegación con captura de pantalla.

CSS:

/* navbar */
.navbar-primary .navbar { background:#9f58b5; border-bottom:none; }
.navbar-primary .navbar .nav > li > a {color: #501762;}
.navbar-primary .navbar .nav > li > a:hover {color: #fff; background-color: #8e49a3;}
.navbar-primary .navbar .nav .active > a,.navbar .nav .active > a:hover {color: #fff; background-color: #501762;}
.navbar-primary .navbar .nav li > a .caret, .tnav .navbar .nav li > a:hover .caret {border-top-color: #fff;border-bottom-color: #fff;}
.navbar-primary .navbar .nav > li.dropdown.open.active > a:hover {}
.navbar-primary .navbar .nav > li.dropdown.open > a {color: #fff;background-color: #9f58b5;border-color: #fff;}
.navbar-primary .navbar .nav > li.dropdown.open.active > a:hover .caret, .tnav .navbar .nav > li.dropdown.open > a .caret {border-top-color: #fff;}
.navbar-primary .navbar .navbar-brand {color:#fff;}
.navbar-primary .navbar .nav.pull-right {margin-left: 10px; margin-right: 0;}
.navbar-xs .navbar-primary .navbar { min-height:28px; height: 28px; }
.navbar-xs .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-primary .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 28px; }
.navbar-sm .navbar-primary .navbar { min-height:40px; height: 40px; }
.navbar-sm .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 40px; }
.navbar-sm .navbar-primary .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 40px; }

Código de uso:

<div class="navbar-xs">
   <div class="navbar-primary">
       <nav class="navbar navbar-static-top" role="navigation">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">
                 <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="#">Brand</a>
          </div>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">
              <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#">Link</a></li>
                   <li><a href="#">Link</a></li>
              </ul>
          </div><!-- /.navbar-collapse -->
      </nav>
  </div>
</div>

Solución de trabajo:

Bootstrap 3.0 por defecto tiene un relleno de 15px en la parte superior e inferior, ¡así que solo necesitamos anularlo!

Por ejemplo:

.navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px !important;}
.navbar {min-height:40px !important}

Simplemente anule la altura mínima establecida en .navbar así:

.navbar{
  min-height:20px; //* or whatever height you require
}

Modificar la altura de un elemento a algo más pequeño que la altura mínima no hará una diferencia ...

si está utilizando la fuente less, debería haber una variable para la altura de la barra de navegación en el variables.lessarchivo. Si no está utilizando la fuente, puede personalizarla con la utilidad de personalización que proporciona el sitio de bootstrap. Y luego puedes descargarlo e incluirlo en tu proyecto. La variable que busca es:@navbar-height

Esta es mi experiencia

 .navbar { min-height:38px;   }
 .navbar .navbar-brand{ padding: 0 12px;font-size: 16px;line-height: 38px;height: 38px; }
 .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 38px; }
 .navbar .navbar-toggle {  margin-top: 3px; margin-bottom: 0px; padding: 8px 9px; }
 .navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }
 .navbar .navbar-collapse {border-color: #A40303;}

Si están generando sus hojas de estilo con LESS / SASS y están importando Bootstrap allí, descubrí que anular la variable @ navbar-height le permite establecer la altura de la barra de navegación, que se define originalmente en el archivo variables.less.

Quería agregar mis 2 centavos y un agradecimiento a James Poulose por su respuesta original, fue el único que funcionó para mi proyecto en particular (MVC 5 con la última versión de Bootstrap 3).

Esto está principalmente dirigido a principiantes, para mayor claridad y para facilitar las ediciones futuras, le sugiero que agregue una sección en la parte inferior de su archivo CSS para su proyecto, por ejemplo, me gusta hacer esto:

/* Bootstrap overrides */

.some-class-here {
}

Tomando la respuesta de James Poulose anterior, hice esto:

/* Bootstrap overrides */   
.navbar-nav > li > a { padding-top: 8px !important; padding-bottom: 5px !important; }
.navbar { min-height: 32px !important; }
.navbar-brand { padding-top: 8px; padding-bottom: 10px; padding-left: 10px; }

Cambié los valores de padding-top para empujar el texto hacia abajo en mi elemento de la barra de navegación. Puede anular prácticamente cualquier elemento de Bootstrap como este y es una buena manera de hacer cambios sin arruinar las clases base de Boostrap porque lo último que quiere hacer es hacer un cambio allí y luego perderlo cuando actualice Bootstrap.

Finalmente, para una separación aún mayor, me gusta dividir mis archivos CSS y usar declaraciones @import para importar sus subarchivos en un archivo CSS principal para una fácil administración, por ejemplo:

@import url('css/mysubcssfile.css');

Nota : si está introduciendo varios archivos, debe asegurarse de que se carguen en el orden correcto.

Espero que esto ayude a alguien.

Creo que podemos escribir esto con menos estilos, sin cambiar el color existente. Lo siguiente funcionó para mí (en Bootstrap 3.2.0)

.navbar-nav > li > a { padding-top: 5px !important; padding-bottom: 5px !important; }
.navbar { min-height: 32px !important; }
.navbar-brand { padding-top: 5px; padding-bottom: 10px; padding-left: 10px; }

El último ('navbar-brand') es realmente necesario solo si tiene texto como nombre de 'marca'.

Tengo el mismo problema, la altura de mi barra de menú proporcionada por bootstrap era demasiado grande, de hecho descargué un bootstrap incorrecto, finalmente me deshice de él descargando el bootstrap original de este sitio .. http://getbootstrap.com/2.3 .2 / quiero usar bootstrap en yii (netbeans) siga este tutorial, https://www.youtube.com/watch?v=XH_qG8gphaw ... La voz no está presente pero los pasos son lentos, puede comprender e implementar fácilmente ellos. Gracias