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ú.
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:
Y en un teléfono móvil:
¿Qué tal si queremos centrar el logo? Nada más tendremos que agregar el siguiente código:
@media screen and (max-width: 469px) {
.navbar-inverse .navbar-brand {
float: none;
}
}
Tutorial original en inglés: http://docs.themeisle.com/article/7-disable-hamburger-menu-zerif
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una vizsla loca.
- Guía para WordPress 6.6 disponible - 22 de septiembre de 2024
- Guía para WordPress 6.5 disponible - 13 de junio de 2024
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
Hola Ana que tal, espero estés muy bien, me a ayudado un buen tus consejos que siempre escribes gracia!!!!!
tengo una duda que no he podido resolver espero me puedas ayudar. Estoy realizando una página y en donde va el titulo grande coloque un slide hecho con smartslider3. mi problema es como hago para que el menú no lo tape ya que en cualquiera de los modos ya sea tablet, escritorio o movil para parte del slider y el logo.
Otra duda que tengo y no logro componerlo es que en la parte de “ABOUT US” se desapareció el titulo y en la parte de contact el texto que vienen “GET IN TOUCH”, solo se me visualiza cuando estoy como administrador, pero en cualquier navegador no aparece.
Esta es la página que realizo www.lingohotel.com
Si me pudieras ayudar te lo agradecería infinitamente
Hola, Luis Alberto.
Tenés activado el modo de mantenimiento.
En cuanto a los títulos, editalos y guardá los cambios.
Saludos.
Puedo eliminar el menu en un tema de genesis, con el mismo sistema?
Hola, Víctor.
Este código solo sirve para Zerif.
Saludos.
Ola ! Iene como ácer lo tamanho de la fonte ficar proporcional e não demasiado grande ?
Hola, Fabricio.
En el archivo
custom.csso en el panel CSS adicional del personalizador pegá el siguiente código:@media (max-width: 767px) { .navbar-inverse .navbar-nav > li a { font-size: 13px; } }Modificá el valor en píxeles por el que necesites.
Saludos.
Muchas gracias … Fue perfecto con 10px
Qué tal, con la duda. Tengo instalado un tema gratuito llamado Astrid; funciona también o únicamente con Zerif?
Hola, BenjaC.
Este código solo funciona con Zerif.
Saludos.
Hola Cuando instale el tema zerif lite la primera vez el boton hamburguesa funcionaba perfecto, cometi un error en la migracion para mi hosting y me toco reinstalar el tema una vez hecho esto el boton hamburguesa dejo de funcionar como puedo resolverlo, al estar en resolucion para telefono al hacer click sobre el icono se abren los vinculos, pero se cierra inmediatamente
Hola, Alberto.
Fijate si este código te sirve (es lo que recomiendan en la documentación de ThemeIsle):
nav#site-navigation.in { height: auto !important; }Saludos.