Este foro ya no está activo, así que no puedes publicar nuevas preguntas ni responder a las preguntas existentes.

Problema menú Bootstrap

25 de septiembre de 2017

Un increíble saludo

Tengo este menú lo estoy haciendo en Boostrap 3, a simple vista se ve bien, pero cuando reducimos la resolución se desacomoda la palabra contacto, pasa abajo, si queda algo raro. Ademas me gustaría saber como se puede hacer si quiero cambiar el icono hamburguesa por otro icono que yo hice.

Gracias.

Este es mi cod.

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
        </button>

  </div>
    <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="index.html">INICIO</a></li>
          <li><a href="nosotros.html">NOSOTROS</a></li>
          <li><a href="servicios.html">SERVICIOS</a></li> 
          <li><a href="contacto.html">CONTACTO</a></li> 
        </ul>
    </div>
  </div>
</nav>

Mi CSS:

.navbar {
      margin-bottom: 0;
      background-color: #1A1A1A;
      border: 0;
      font-size: 14px !important;
      border-radius: 0;
      font-family: 'Open Sans', sans-serif;
      justify-content: space-between;
      align-items: center;
      position: relative;
      display: flex;
      flex-wrap: wrap
      padding: .10rem 1rem;

  }

.navbar li a, .navbar .navbar-brand {
      color: #B3B3B3 !important;
  }

.navbar-nav li a:hover, .navbar-nav li.active a {
      color: #FFF !important;
      background-color: #ED1E79 !important;
  }

.navbar-default .navbar-toggle {
      border-color: transparent;
      color: #fff !important;
      margin: 0px;
  }

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

}

.navbar {
    min-height:32px !important; /* aqui escoges el alto que necesites */
}

Respuestas

#1

Te aconsejo que reduzcas el tamaño de la letra en un media Query de la siguiente manera por ejemplo: tienes la letra en tamaño 14px en tu código CSS, pones en el media Query que si la resolución es menor a 648 de ancho entonces la letra se reduzca a 10px:

@media screen max-width: 648px {
.navbar {
         font-size: 10px !important;
        }
}

Considero también que la parte del CSS que dice:

flex-wrap: wrap padding: .10rem 1rem;

Sobra y está ocasionando un desborde al sobrepasar el ancho de la fila que lo contiene. Si usas Bootstrap el automáticamente debe hacer responsive. No puedo ver tu código html mira el listado de código para meterlo en ello. Espero te sirva y estoy atento a cualquier inquietud. Te aconsejo usar bootstrap 4 tiene mejoras significativas y se ajusta más a los diseños actuales.

@leo_tinoco_a

3 octubre 2017, 21:57