[SOLUCIONADO] duda media query bootstrap

[programador_aprendiz]

Buenas compañeros tengo esta parte de código de mi menu, es decir, el de los enlaces:

Código HTML:

<div id="navbar" class="collapse navbar-collapse">
   <ul class="nav navbar-nav">
      <li><a href="<?php base_url(); ?>nosotros">Nosotros</a></li>
      <li><a href="<?php base_url(); ?>productos">Productos</a></li>
      <li><a href="<?php base_url(); ?>servicios">Servicios</a></li>
      <li><a href="<?php base_url(); ?>contacto">Contacto</a></li>
   </ul>
</div> <!--/.nav-collapse --> 

el alto de mi barra de navegacion lo tube que modificar poder meter un logo de 100px x 100px con el siguiente estilo:

Código:

.navbar-header {
   height: 120px;
}

hasta aqui todo bien, pero los enlaces que les comentaba estan en la parte superior y quiero alinearlos verticalmente en el centro ya que si no lo hago se ve un espacio en la parte inferior, pero solo quiero que se aplique para pantallas de pc de ciertas medidas, ya que, si no lo defino asi al checarlo en pantallas aun mas pequeñas (telefonos, celulares por poner un ejemplo) se ve feo el boton para dicho proposito.

Bueno para que me entiendan, yo supongo que este es el código de dicho boton de la barra de navegacion que aparece solo para dispositivos moviles:

Código HTML:

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
   <span class="sr-only">Toggle navigation</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
</button> 

El estilo css con el que doy dicho espacio asegurando que solo sea para las pantallas que les mencionaba es este, usando la clase 'nav' de la etiqueta ul la cual contiene a los enlaces:

Código:

@media only screen and (min-width : 768px) {
   #navbar {
      padding-top: 35px;
   }
}

Estube haciendo pruebas con mi navegador al cambiarlo de tamaño y si me funciona, pero tengo dudas si es la forma correcta de hacerlo, ya que investigando un poco en google vi metodos mucho más complejos donde hasta modificaban estilos y clases propios de bootstrap (sobreescritura creo yo) donde incluyen etiquetas li, a, navbar, navbar-default navbar-fixed-top

[emilio_oli]

Hola,

No se si entendí muy bien lo que dijiste, pero si lo que quieres es adaptar a la pantalla y estas usando bootstrap, puedes definir las siguientes medidas: xs, sm, md, lg, donde xs es para teléfonos y lg para pantallas de ordenador.

Por ejemplo si pones hidden-xs en la clase, estas ocultando ese objeto para las medidas de móvil.

Por otro lado, puedes poner:
@media screen and (max-width:769px) { ....
o también @media screen and (min-device-width:768px), screen and (max-device-width:1024px){

solo son ejemplos.
Siento si no te entendí bien

[programador_aprendiz]

Iniciado por emilio_oli

Hola,

No se si entendí muy bien lo que dijiste, pero si lo que quieres es adaptar a la pantalla y estas usando bootstrap, puedes definir las siguientes medidas: xs, sm, md, lg, donde xs es para teléfonos y lg para pantallas de ordenador.

Por ejemplo si pones hidden-xs en la clase, estas ocultando ese objeto para las medidas de móvil.

Por otro lado, puedes poner:
@media screen and (max-width:769px) { ....
o también @media screen and (min-device-width:768px), screen and (max-device-width:1024px){

solo son ejemplos.
Siento si no te entendí bien

Si es eso, es que tenia dudas en la manera de implementar las medidas y eso, es decir, si lo que yo puse es la unica manera o la forma más correcta de hacerlo.

Lo que me compartes me parece interesante lo investigare. Gracias por la ayuda.