1

Estoy usando el siguiente navbar:

introducir la descripción de la imagen aquí

Y estoy teniendo este problema:

introducir la descripción de la imagen aquí

Se puede ver que por la cantidad de elementos que tiene el navbar, cuando voy achicando la resolución de la pantalla, los elementos que están alineados hacia la derecha, se pasan para abajo.

Necesito evitar eso, haciendo que la aparición de esto:

introducir la descripción de la imagen aquí

ocurra antes del problema expuesto.

El código:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#">Las Holass</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Hooola Holaaa!</a></li>
        <li><a href="#">holahola</a></li>
        <li><a href="#">Hooola hola!</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-hover" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Holita
          <i class="glyphicon glyphicon-user white"></i>
          </a>
          <ul class="dropdown-menu">
            <li><a id="login" href="#">Cerrar Sesión</a></li>
          </ul>
        </li>
        <li><a href="#">Hooola Holas</a></li>
        <li><a href="#">hoola holaaa</a></li>
      </ul>
    </div><!-- fin navbar-collapse -->
  </div><!-- fin container-fluid -->
</nav>

Hay alguna forma de definir la anchura mínima en píxeles desde la cual aparecerá el botón de las tres barras blancas que comprime el contenido del navbar?

EDIT

Lo que necesito es establecer la anchura máxima* desde la cual aparecerá el botón señalado anteriormente, no la mínima como describí erróneamente.

Por ejemplo, si actualmente ese botón aparece entre 0px y 765px de ancho, necesito que aparezca entre 0px y 769px de ancho.

5
  • Hay dos explicaciones a eso, pero lo mas importante es que comprendas que no en todos los tamaños te debes preocupar. Eso pasa porque el tamaño de la pantalla no alcanza el ancho que tiene definido en el menú. trata de visualizarlo en la herramienta de cualquier navegador en modo teléfono. Si eso no te gusta existe la propiedad en css min-width
    – cignius
    Commented el 14 nov. 2016 a las 4:16
  • @Cig dónde sugieres que use la propiedad min-width? Commented el 15 nov. 2016 a las 10:47
  • Pues si sabes moverte por el CSS, puedes añadir un media query como @media screen and (max-width: 769px){ /* aplicas para tu lista (<ul class="nav navbar-nav navbar-right">), display: none; */ /* aplicas para el botón de menú (No lo veo en tu código html) con tu otra lista, display: block, display: inline-block; vertical-align: middle; min-width: El porcentaje que quieras (Ejm: 20%); */ } es la idea básica Commented el 15 nov. 2016 a las 12:03
  • El botón está: es el <button type="button" class="navbar-toggle collapsed" data-tog...> , podrías poner una respuesta para entender mejor tu css Commented el 15 nov. 2016 a las 12:27
  • Como comenta @FIPS es mejor que utilices media query para eso. Y eso pasa mucho porque utilizas propiedades relativas para el navegador, es decir, responsive design
    – cignius
    Commented el 15 nov. 2016 a las 13:15

2 respuestas 2

1

Cambie el punto de interrupción de la barra de navegación desde 1000px al punto de interrupción deseado, donde desea que la barra de navegación se contraiga

@media (max-width: 991px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}

La solucion la encontre aqui: https://stackoverflow.com/questions/19827605/change-bootstrap-navbar-collapse-breakpoint-without-using-less/36289507#36289507

Algun ejemplo: http://www.bootply.com/j7XJuaE5v6

Saludos, espero te sirva.

0

Me explico, como te comente, una forma de hacerlo es realizar un media query tal que:

@media screen and (max-width: 769px){
    /* aplicas para tu lista (<ul class="nav navbar-nav navbar-right">).
    haces desaparecer el menú para luego llamarlo. */
    ul#menuDerecha{
        display: none;
    }

    /* aplicas para el botón de menú (<button type="button" class="navbar-toggle [...] aria-expanded="false">)
    junto con tu otro menu (<ul class="nav navbar-nav">), y lo suyo es que tengas en fichero funtions.js definido
    el método de click asociado al boton de menú para que aparezca y desaparezca el menu */
    ul#menuIzquierda, button#elBotonMenu{
        display: inline-block;
        vertical-align: middle;
        max-width: 75%;
    }
        button#elBotonMenu{
            max-width: 20%;
        }
    /* Puede que necesites min-with y no max-with... depende de como estén las clases */
}

Y te lo repito, es una idea base, depende también de las clases que tiene asociadas.

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.