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