css - sigue - ¿Cómo se disminuye la altura de la barra de navegación en Bootstrap 3?

navigation sticky html

Question

Quiero hacer que mi barra de navegación en BS3 sea de 20px de altura. ¿Cómo hago esto?

He intentado lo siguiente:

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

Hice nada.

.navbar-fixed-top {
    height: 25px; /* Whatever you want. */
}

Parece ser capaz de aumentar el tamaño de la barra, pero no puede disminuir.

¿Cuál es una buena manera de hacerlo mientras se preserva la alineación del contenedor, etc.

Answer 1

El ejemplo anterior de Minder Saini casi funciona, pero la .navbar-brand necesita reducirse también.

Un ejemplo de trabajo (usándolo en mi propio sitio) con Bootstrap 3.3.4 :

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

Editar para dispositivos móviles ... Para hacer que este ejemplo también funcione en dispositivos móviles, debe cambiar el estilo de la barra de navegación para alternar como tal

.navbar-toggle {
     padding: 0 0;
     margin-top: 7px;
     margin-bottom: 0;
}

Answer 2

En lugar de <nav class="navbar ... use <nav class="navbar navbar-xs...

y agrega estas 3 líneas de css

.navbar-xs { min-height:28px; height: 28px; }
.navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 28px; }

Salida :

Answer 3

La respuesta anterior funcionó bien (MVC5 + Bootstrap 3.0), pero la altura volvió a la predeterminada una vez que apareció el botón de la barra de navegación (pantalla muy pequeña). Tuve que agregar lo siguiente en mi .css para arreglar eso también.

.navbar-header .navbar-toggle {
    margin-top:0px;
    margin-bottom:0px;
    padding-bottom:0px;
}

Answer 4

Si solo tiene un navegador y desea cambiarlo, debe cambiar sus variables. @navbar-height : @navbar-height (en algún lugar cerca de la línea 265, no recuerdo cuántas líneas agregué al mío).

Esto es referenciado por mixin .navbar-vertical-align , que se utiliza, por ejemplo, para colocar el elemento "alternar", cualquier cosa con .navbar-form, .navbar-btn, y .navbar-text .

Si tiene dos barras de navegación y quiere que sean de alturas diferentes, la respuesta de Minder Saini puede funcionar bastante bien, cuando califique más con un, por ejemplo, #topnav.navbar pero debe probarse en varios anchos de dispositivo.

Answer 5

Simplemente cambie la altura predeterminada de la barra de navegación de 50px al incluir esto en las modificaciones de variables.

Puede encontrar esta altura de barra de navegación predeterminada en la línea 365 y 360 en las variables SASS y LESS de la rutina de arranque, respectivamente.

Answer 6

bootstrap tenía 15px de relleno superior y 15px relleno de fondo en .navbar-nav > li > a por lo que necesita disminuirlo sobreescribiéndolo en su archivo css y .navbar tiene min-height:50px; disminuirlo tanto como quieras

por ejemplo

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

agregue estas clases a su CSS y luego verifique.

Answer 7

Para Bootstrap 4
Algunas de las respuestas anteriores no funcionan para Bootstrap 4. Para reducir el tamaño de la barra de navegación en esta versión, sugiero eliminar el relleno de esta manera.

.navbar { padding-top: 0.25rem; padding-bottom: 0.25rem; }

Podrías probar con otros estilos también.
Los estilos que encontré que definen la altura total de la barra de navegación son:

• padding-top padding-bottom están configuradas en 0.5rem para .navbar .
• padding-top padding-bottom están configuradas en 0.5rem para .navbar-text .
• además de una line-height de line-height de 1.5rem heredada del body .

Por lo tanto, en total, la barra de navegación es 3.5 veces el tamaño de la fuente raíz.

En mi caso, que estaba usando tamaños de letra grandes; Redefiní la clase ".navbar" en mi archivo CSS de esta manera:

.navbar {
  padding-top:    0.25rem; /* 0px does not look good on small screens */
  padding-bottom: 0.25rem;
  font-size: smaller;      /* Just because I am using big size font */
  line-height: 1em;
}

Comentario final, evite usar valores absolutos cuando juegue con los estilos anteriores. Use las unidades rem o em lugar.

Answer 8

 .navbar-nav > li > a {padding-top:7px !important; padding-bottom:7px !important;}
.navbar {min-height:32px !important;} 
.navbar-brand{padding-top:7px !important; max-height: 24px;  }
.navbar .navbar-toggle {  margin-top: 0px; margin-bottom: 0px; padding: 8px 9px; }