1

¿Cómo puedo hacer mas delgado mi navbar? he intentado pero no logro hacerlo solo desubico los tamaños de forma incorrecta, este es mi código:

  <nav class="navbar navbar-default navbar-inverse " >

<div id="navigation">
  <ul class="nav nav-pills">
    <li role="presentation" class="home" ><a href="index.html" class="a" style="background: url(assets/images/home1.png);"><img class="imagen" src="assets/images/home1.png"></a></li>
     <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" >
          <h4 >MENU <b class="caret"></b></h4>
        </a>

        <ul class="dropdown-menu" >
          <li class="dropdown-header" ><a href="#" ><h4>PRODUCTOS</h4></a></li>
          <li class="divider"></li>
          <li><a href="pacas.html"><h4>Pacas Credenciales</h4></a></li>
          <li><a href="fardos.html"><h4>Fardos</h4></a></li>
          <li><a href="zapatos.html"><h4>Zapatos</h4></a></li>
          <li><a href="cajaMiselanea.html"><h4>Caja Miscelanea</h4></a></li>
        </ul>
      </li>

     <li role="presentation" ><a href="locacion.html"><h4> UBICACIÓN</h4></a></li>
     <li role="presentation" ><a href="tiendas.html"><h4> TIENDAS</h4></a></li>
     <li role="presentation" ><a href="contactanos.html"><h4> CONTÁCTANOS</h4></a></li>

  </ul>

He intentado pero no logro que la barra se vea mas delgada, se visualiza asi: introducir la descripción de la imagen aquí

¿Podrían ayudarme a reducir su altura, de modo que no se vea tan alto y que quede mas compacto hacia las palabras?

3
  • Podrías empezar por reducir el alto de la imagen de la casita y luego si el alto de la barra como tal, con css, probablemente sobreescribiendo el estilo de bootstrap.
    – Shaz
    Commented el 6 jun. 2016 a las 23:04
  • ¿Por qué tienes la imagen como fondo y como imagen? Si la tuvieras sólo como fondo (sin la imagen en el botón, especificando un ancho) entonces no tendrías este problema (si no recuerdo mal es algo que ya se comentó en otra pregunta que hiciste en el pasado)
    – Alvaro Montoro
    Commented el 7 jun. 2016 a las 14:44
  • Para que se vea l franja azul que se ve en la parte inferior derecha Commented el 7 jun. 2016 a las 15:53

1 respuesta 1

1

Puedes sobreescribir el estilo de bootstrap de la siguiente manera

.navbar-nav > li > a, .navbar-brand {
    padding-top:5px !important; padding-bottom:0 !important;
    height: 30px; /* aqui escoges el alto que necesites */
}
.navbar {
    min-height:30px !important; /* aqui escoges el alto que necesites */
}

Probablemente tengas que reducir el alto de la casita como menciono Shaz en uno de los comentarios.

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.