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

108

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

ingrese la descripción de la imagen aquí

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?

irfanmcsd
fuente
No más necesidad de <div class = "navbar-inner"> en Bootstrap 3
Bartek S
navbar-inner es mi clase personalizada. no relacionado con bootstrap 3.0.
irfanmcsd
La única forma en que funcionó para mí se explica en este enlace: stackoverflow.com/questions/19576175/… Disminuye la altura de la barra de navegación con solo dos líneas de código
giovannim

Respuestas:

124

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.

ingrese la descripción de la imagen aquí

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>
irfanmcsd
fuente
4
esto no funciona ... verifique mi respuesta en esta página ... la altura mínima para .navbar está establecida en 50 px de forma predeterminada, por lo que si establece la altura en 28 px, será anulada por la altura mínima de 50 px. ..
patrick
3
Ah, veo que esta publicación fue editada (¡mucho!) Y ahora muestra el código correcto. También veo la configuración de altura mínima que sugerí en mi publicación aquí que, por alguna razón, recibió un voto negativo. Es muy frustrante recibir una votación negativa por una respuesta que es correcta, está relacionada con el tema y es clara ...
patrick
@patrick no sé a qué te refieres, pero en ese momento mi problema se resolvió con mi propia respuesta. La reputación no tiene duda, si la gente me da un voto positivo o negativo.
irfanmcsd
1
Editar la fuente hubiera facilitado las
cosas
Es curioso, estos no funcionaron para mí. Tuve que anular la altura fija de 50px;
Kevin
43

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}
Ranveer
fuente
El valor predeterminado es 10px en bootstrap.css? .navbar-nav> li> a {padding-top: 10px; fondo acolchado: 10px; altura de línea: 20px; }
jichi
1
Consulte la línea número 3884 en bootstrap.css (v3.0.2). Es .navbar-nav > li > a {padding-top: 15px; padding-bottom: 15px;}por defecto.
Ranveer
No estoy seguro acerca de la v3.0.2. Pero en v3.0.3 línea 4541 en bootstrap.css, es: .navbar-nav> li> a {padding-top: 10px; fondo acolchado: 10px; altura de línea: 20px; }
jichi
Usted señor, es mi héroe.
orokusaki
40

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 ...

Patricio
fuente
como ves en la barra de navegación, ya uso la propiedad de altura pero sin efecto.
irfanmcsd
es la propiedad min-altura, la altura no ... si se establece la altura a un número inferior a la altura min-min-altura será evitar que se vuelva más pequeña ...
Patrick
7
¿Por qué esto tiene un voto negativo? Es una solución funcional para el problema establecido en esta publicación. ¿Puede un moderador mirar esto, por favor? Parece que hay un votante en contra que simplemente vota en contra de las cosas con las que no está de acuerdo sin verificar la respuesta real. Un enlace publicado más adelante 2,5 meses después de mi publicación tiene la misma respuesta, está en un enlace externo y obtuvo dos votos a favor. ¡Odio cuando la gente diluye SO con votos negativos al azar!
patrick
A menudo me preguntaba cómo la gente ahora tiene un voto negativo, ¿recibe una notificación? No se pudo encontrar esto en meta
Iulian Onofrei
5
sin notificación ... parece que la gente da votos negativos si piensan que otra respuesta es mejor o algo ... No sé ... En este caso, el tipo que hizo la pregunta tomó mi respuesta en su propia respuesta y aceptó esa respuesta ... . Un poco tonto si me preguntas ... Pero, de nuevo, este sitio no se trata de ego, se trata de ayudar a otros ...
patrick
27

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

AJ Meyghani
fuente
1
pero no quiero cambiar el comportamiento original de la barra de navegación. Acabo de cambiar la altura para una barra de navegación superior adicional.
irfanmcsd
2
Creo que es la mejor solución.
Imtiaz
1
Esta es la mejor solución si solo tiene un navegador en el sitio y debe tener esa altura. Si tiene varias navegaciones, se vuelve un poco más difícil, ya que .navbar-vertical-align se usa en varios lugares y tiene una fuerte referencia a @ navbar-height.
Carl Bussema
buena solución. siempre y cuando no planee utilizar CDN
eagor
1
Siempre que use anulaciones en un menos parcial separado, esta es la mejor solución y debería permitirle actualizar bootstrap sin problemas.
Ken Prince
9

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;}

cambiar la altura de navabr a 38px

Hoàng Vũ Tgtt
fuente
Agregue esto para cuidar de .navbar-form:.navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }
steph643
Otra extensión: .navbar .navbar-text {margin-top: 0px; margen inferior: 0px; altura de línea: 38px; }
cnmuc
3

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.

ingrese la descripción de la imagen aquí


fuente
3

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.

Tahir Khalid
fuente
2

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'.

James Poulose
fuente
Buena respuesta, este fue el único que funcionó para mí con la última versión de Bootstrap 3 (una nota: si desea presionar el texto hacia abajo, aumente el valor de padding-top para la clase .navbar-brand así como .navbar-nav> li> a classses.
Tahir Khalid
0

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

Usman I
fuente
¿Qué cambió en el código para obtener el efecto deseado? Si señala un enlace en una respuesta, debe resumir la solución.
Brian