Cómo hacer que el menú de Bootstrap sea responsive para móviles

No se muy bien como describir lo que necesito. Estoy buscando que mi menú se muestre de una forma distinta cuando está en mobile.

Estoy usando bootstrap, creo yo, el mejor framework para maquetar. Pero me ha surgido un problema, que no es la primera vez que me pasa. El caso es que tengo un menú en el header que cuando estoy en la PC (alta resolución) se ve excelente, pero que a la hora de verse en un móvil, se ve tremendamente mal.

Es por eso que quiero que mi menú se vea de una forma distinta en PC y luego, en los móviles.

El caso es este, lo tengo alojado en Home | Corlate el diseño que he hecho. Y quiero que mi menú tome otros estilos, y se vea como el menú responsive de este sitio: Contadores Auditores Amigo Valentini y Cia Srl

No se ni por donde empezar a tocar. Para los que no saben a qué estilos me refiero, les dejo esta imagen que seguramente va a dar entender mi problema:



¿De qué manera se podría solucionar de modo que el menú de Bootstrap no tome los estilos del menú original, si no que tome otros?

Espero que se haya entendido lo que me está rompiendo la cabeza 🙂

Tendriasnque usar la clase collapse mira acá:
https://librosweb.es/libro/bootstrap_3/capitulo_6/barras_de_navegacion.html

También esta en la web oficial de bootstrap una guía similar pero en ingles.

Saludos.

ArSk8 dijo:

Tendriasnque usar la clase collapse mira acá:
https://librosweb.es/libro/bootstrap_3/capitulo_6/barras_de_navegacion.html

También esta en la web oficial de bootstrap una guía similar pero en ingles.

Saludos.

Hacer clic para expandir...

Gracias! Ya lo había revisado eso, pero de todos modos, ese no es el problema. Si te fijas, en la demo que puse: Home | Corlate ya esta funcionando el collapse. Lo que quiero es que el collapse no tome los estilos de como está el menú en la versión de PC si no que tome otros estilos. Y no se como hacerlo, ahí está mi problema. Lo ideal es que se vea así cuando se vea en el movil:

sin codigos dificil lo veo , algo asi
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" style="margin-right: 0;float: left;margin-top: 14px;">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

haz lo siguiente:

en main.css


.navbar-inverse .navbar-nav > li > a {
/* padding: 45px 12px; */
margin: 0;
color: #353535;
line-height: 24px;
/* display: inline-block; */
text-transform: uppercase;
}


en responsive.css

@ media (max-width: 767px)
.container > .navbar-header, .container > .navbar-collapse {
margin-left: 0;
/* height: 85px; */
}

Ya luego el hover le puedes dar un padding.

rayden dijo:

haz lo siguiente:

en main.css


.navbar-inverse .navbar-nav > li > a {
/* padding: 45px 12px; */
margin: 0;
color: #353535;
line-height: 24px;
/* display: inline-block; */
text-transform: uppercase;
}


en responsive.css

@ media (max-width: 767px)
.container > .navbar-header, .container > .navbar-collapse {
margin-left: 0;
/* height: 85px; */
}

Ya luego el hover le puedes dar un padding.

Hacer clic para expandir...

Gracias!! Esto combinado con otros cambios en CSS fue lo que me orientó. El responsive.css sin duda que me desconcertó un poco. Gracias de nuevo!