css - logo - Cambie la barra de navegación del bootstrap para colapsar el punto de interrupción sin usar LESS

menu mobile bootstrap

Question

Actualmente, cuando el ancho del navegador cae por debajo de 768px, la barra de navegación cambia al modo colapsado. Quiero cambiar este ancho a 1000 px así que cuando el navegador está debajo de 1000px, la barra de navegación cambia al modo colapsado. Quiero hacer esto sin usar MENOS, estoy usando el lápiz óptico no MENOS.

Mi problema es el mismo que en esta pregunta: Bootstrap 3 Navbar Collapse

Pero todas las respuestas en esas preguntas explican cómo hacerlo cambiando la variable LESS. No he estado tratando con LESS, estoy usando stylus, así que quiero saber cómo se puede hacer usando stylus u otro método.

¡Gracias!

Answer 1

Además de @Skely answer, para hacer que los menús desplegables dentro de la barra de navegación funcionen, también agregue sus clases para que se anulen. Código final a continuación:

    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .navbar-header {
            float: none;
        }
        .navbar-toggle {
            display: block;
        }
        .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        }
        .navbar-collapse.collapse {
            display: none!important;
        }
        .navbar-nav {
            float: none!important;
            /*margin: 7.5px -15px;*/
            margin: 7.5px 50px 7.5px -15px
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .navbar-text {
            float: none;
            margin: 15px 0;
        }
        /* since 3.1.0 */
        .navbar-collapse.collapse.in { 
            display: block!important;
        }
        .collapsing {
            overflow: hidden!important;
        }
    }

código de demostración

Answer 2

Aquí mi código de trabajo usando en React with Bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>

Answer 3

En bootstrap 4, si quieres anular cuando navbar-expand- *, se expande y colapsa y muestra y oculta la hamburguesa (navbar-toggler) tienes que encontrar ese estilo / definición en bootstrap.css, y redefinirlo en tu propio customstyle.css (o directamente en bootstrap.css si así lo desea).

P.ej. Quería que navbar-expand-lg colapse y muestra la barra de navegación-toggler a 950px. En bootstrap.css encuentro:

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

Y debajo de eso ...

@media (min-width:992px) { 
    ... lots of styling ...
}

Copié ambas consultas de @media y las pegué en mi style.css, luego modifiqué el tamaño para adaptarlo a mis necesidades. En mi caso, quería que colapsara a 950 px. Las consultas de @media deben tener diferentes tamaños (supongo), así que configuré el ancho máximo del contenedor en 949.98px y usé el 950px para la otra consulta @media y, por lo tanto, el siguiente código se adjuntó a mi style.css. Esto no fue fácil de desenredar de soluciones retorcidas que encontré en y en otros lugares. Espero que esto ayude.

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}

Answer 4

En bootstrap v4, la navegación puede colapsarse tarde o temprano usando diferentes clases de CSS

p.ej:

• navbar-toggleable-sm
• navbar-toggleable-md
• navbar-toggleable-lg

Con el botón para la navegación:

• oculto-sm-up
• hidden-md-up
• hidden-lg-up

Answer 5

En el código fuente Bootstrap 3 .LESS, hay una variable definida en variables.less llamada @grid-float-breakpoint que tiene el siguiente comentario útil:

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

El valor matching @grid-float-breakpoint-max se establece en ese menos 1px:

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

Solución:

Así que simplemente configure el valor @grid-float-breakpoint en 1000px en su lugar y vuelva a generar bootstrap.less en bootstrap.css :

p.ej

@grid-float-breakpoint: 1000px;

Answer 6

Esto es lo que hizo el truco para mí:

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}

Answer 7

Esto funcionó para mí Bootstrap3

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

Tomó un tiempo para resolver estos dos:

.navbar-collapse.collapse {
   display: none!important;
}
.navbar-collapse.collapse.in {
   display: block!important;
}

Answer 8

Finalmente resolvió cómo cambiar el ancho de colapso al jugar con ''@ grid-float-breakpoint'' en getbootstrap.com/customize .

Vaya a la línea 2923 en bootstrap.css (también versión mínima) y cambie la @media screen and (min-width: 768px) { a la @media screen and (min-width: 1000px) {

Entonces el código terminará siendo:

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

Answer 9

Hola, creo que puedes hacerlo usando CSS de esta manera, puedes cambiar el menú de arranque del punto de interrupción

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important; 
    }
    .navbar-nav>li {
        float: none;
    } 
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}

Answer 10

La forma Sass de cambiar las variables de arranque está documentada en la página bootstrap-sass github.

Simplemente redefina las variables antes de @import bootstrap:

$grid-float-breakpoint: 1000px;

@import ''bootstrap'';

Answer 11

Lo hice con éxito utilizando el siguiente código CSS.

@media(max-width:1000px)  {

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}

Answer 12

Para Bootstrap 3.3, este es el único código que necesita:

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}

Answer 13

Su mejor opción sería usar un puerto del procesador CSS que usa.

Soy un gran admirador de SASS, así que actualmente uso https://github.com/thomas-mcdonald/bootstrap-sass

Parece que hay un tenedor para Stylus aquí: https://github.com/Acquisio/bootstrap-stylus

De lo contrario, Buscar y reemplazar es tu mejor amigo en la versión css ...

Answer 14

Tienes que escribir una consulta de medios específica para esto, a partir de tu pregunta, debajo de 768px, la barra de navegación se colapsará, así que aplícala por encima de 768px y por debajo de 1000px, solo así:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

Esto ocultará el colapso de la barra de navegación hasta la aparición predeterminada de la unidad de arranque. A medida que la clase de colapso invierte los recursos internos, el colapso de la barra de navegación se ocultará automáticamente, así que tienes que configurar tu CSS como lo deseas.

Answer 15

en bootstrap3 , cambie esta variable @ grid-float-breakpoint por la que necesita. El valor predeterminado es 768px

Answer 16

ACTUALIZACIÓN 2018

Bootstrap 4

Cambiar el punto de interrupción de la barra de navegación es más fácil en Bootstrap 4 usando las navbar-expand-* :

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

• navbar-expand-sm = menú móvil en pantallas xs <576px
• navbar-expand-md = menú móvil en pantallas sm <768px
• navbar-expand-lg = menú móvil en pantallas md <992px
• navbar-expand-xl = menú móvil en pantallas lg <1200px
• navbar-expand = nunca use el menú móvil
• (no expand class) = siempre use el menú móvil

Si excluye navbar-expand-* el menú móvil se usará en all anchos. Aquí hay una demostración de los 6 estados de la barra de navegación: Bootstrap 4 Navbar Example

También puede usar un punto de corte personalizado (??? px) agregando un poco de CSS. Por ejemplo, aquí hay 1300px ..

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 Custom Navbar Breakpoint
Ejemplos de puntos de interrupción Bootstrap 4 Navbar

Bootstrap 3

Para Bootstrap 3.3.x, aquí está el CSS que funciona para anular el punto de interrupción de la barra de navegación. Cambia 991px a la dimensión de píxel del punto en el que quieres que se colapse la barra de navegación ...

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

Ejemplo de trabajo para 991px: http://www.bootply.com/j7XJuaE5v6
Ejemplo de trabajo para 1200px: https://www.codeply.com/go/VsYaOLzfb4 (con formulario de búsqueda)

Nota: Lo anterior funciona para cualquier cosa superior a 768px . Si necesita cambiarlo a menos de 768px, aquí está el ejemplo de menos de 768px .