Actualizado el 12/12/2016

En el tutorial número catorce dedicado al tema gratuito Zerif Lite, de ThemeIsle, veremos cómo desactivar el menú para móviles en las resoluciones de pantalla correspondientes. Si bien el icono “hamburguesa” es universalmente reconocido hoy en día, puede darse el caso de que no lo necesitemos, si es que no tenemos muchos elementos en el menú.

Zerif Lite - Menú con pocos enlaces

Un menú de Zerif Lite con pocos enlaces

Con las siguientes instrucciones, desactivaremos este componente y mostraremos solo las etiquetas, como en el menú convencional. Como siempre, es recomendable trabajar con un tema hijo: las instrucciones para crearlo se encuentran en esta entrada anterior.

En caso de que solo hagamos ediciones de estilo no es necesario el tema hijo, sino que será suficiente añadir el código en el panel CSS adicional del Personalizador.

Ahora, en el archivo custom.css del tema hijo (o en el panel CSS adicional del Personalizador), pegue el siguiente código:

@media screen and (max-width: 768px) {

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

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

.responsive-logo {
 float:left !important;
}

nav.navbar-collapse ul li {
 width: auto !important;
 margin-left: 10px !important;
 border-bottom: none !important;
} 

#site-navigation {
 height: auto;
}

}

Veamos el resultado en una tablet:

Zerif Lite - iPad

Y en un teléfono móvil:

Zerif Lite - iPhone

¿Qué tal si queremos centrar el logo? Nada más tendremos que agregar el siguiente código:

@media screen and (max-width: 469px) {

.menu-align-center .responsive-logo > a {
 float:none !important;
}

}

Zerif Lite - iPhone - Logo centrado

Tutorial original en inglés: http://docs.themeisle.com/article/7-disable-hamburger-menu-zerif

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en Electromecánica, Periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web

Últimas entradas por Caribdis Diseño Web (ver todas)