Continuando con la serie de tutoriales para el tema Zerif Lite de ThemeIsle, en este décimo capítulo aprenderemos a transformar el menú estándar en un icono que al hacerle clic desplegará los enlaces.
El icono hamburguesa es un símbolo que consiste en tres líneas horizontales paralelas (≡) y que ha ganado gran difusión en los últimos años gracias a los dispositivos móviles. Pero lejos de ser algo “moderno”, este icono data de los comienzos de la era de la computación personal basada en interfaces gráficas, ya que fue diseñado para la Xerox Star, allá por los albores de la década del 80.
Con frecuencia está ubicado en el extremo superior izquierdo o derecho de las páginas, y se le ha dado ese mote por su supuesta semejanza a un sándwich de hamburguesa. Al hacer clic en este icono se despliega un menú de páginas o de opciones, optimizando el espacio reducido de las pantallas de los dispositivos móviles.
Con meros propósitos estéticos, puede que queramos mantener ocultos los elementos del menú y simplemente mostrar ese icono para animar al usuario a que interactúe.
Para mostrar siempre el icono hamburguesa en Zerif Lite, tendremos que agregar código CSS en la hoja de estilos del tema hijo. Las instrucciones para crear un tema hijo se encuentran en esta entrada anterior.
En el archivo custom.css del tema hijo agregamos lo siguiente:
@media (min-width: 320px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
.navbar-inverse .navbar-nav {
padding-left: 10px;
line-height: normal;
text-align: center;
}
.navbar-inverse .navbar-nav>li {
display: inline-block;
margin-bottom: 0;
}
.navbar-inverse .navbar-nav > li {
width: 100%;
border-bottom: 1px solid #EDEDED;
position: relative;
margin: 8px 0 0 0;
padding: 0 0 8px 0;
}
.navbar-inverse .navbar-nav > li a {
text-align: left;
}
.navbar-inverse .navbar-nav ul.sub-menu {
display: none !important;
position: relative;
top: 0;
box-shadow: none;
width: 100%;
}
.navbar-inverse .navbar-nav li.this-open > ul {
display: block !important;
}
.navbar-inverse .navbar-nav ul.sub-menu li {
width: 100%;
float: left;
}
.navbar-inverse .navbar-nav ul.sub-menu li a {
width: 100%;
float: left;
padding: 8px 25px 8px 0;
border-bottom: 1px solid #EDEDED;
}
.navbar-inverse .navbar-nav ul.sub-menu li:last-child a {
border-bottom: none;
}
.navbar-inverse .navbar-nav ul.sub-menu ul.sub-menu {
position: relative;
left: 0;
top: 0;
}
#main-nav {
overflow: visible;
}
#main-nav, #main-nav.fixed {
position: relative;
}
.navbar-collapse {
max-height: 100%;
}
.navbar-inverse .navbar-nav ul.sub-menu li {
padding-left: 20px;
}
.navbar-inverse .navbar-nav ul.sub-menu li {
padding-bottom: 0;
padding-top: 0;
}
.dropdownmenu {
display: block;
position: absolute;
z-index: 9;
right: 0;
top: 5px;
width: 25px;
height: 25px;
margin: 0;
padding: 0;
border-radius: 3px;
background: url(images/menu-icon.png) center center no-repeat #e96656;
}
.navbar-inverse .navbar-nav ul.sub-menu li{
margin-right: 0;
padding-right: 0;
}
.navbar-inverse .navbar-nav > li > a:hover {
color: #404040 !important;
}
.this-open > a {
color: #e96656 !important;
}
ul.nav > li.current_page_item > a:before {
content: "";
left: 0px;
width: 50px;
}
#site-navigation {
width: 100%;
}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
float: left !important;
}
#main-nav {
overflow: hidden !important;
}
}El resultado es el siguiente:
En el caso de que haya añadido el código mediante la opción CSS adicional (más info sobre esta nueva característica de WordPress en esta entrada), recuerde usar la ruta completa a la imagen del icono en la clase .dropdownmenu: background: url(https://su-sitio-wordpress.com/wp-content/themes/zerif-lite/images/menu-icon.png) center center no-repeat #e96656;
Tutorial original en inglés: How to show hamburger menu starting from 1024px in 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
Buenas, tardes, hice uso de otro plugin menu, wp mobile menu, todo funciona bien, pero el icono de hamburguesa del menu viejo se sigue mostrando cuando estamos en la version movil, quisiera saber como ocultarlo, gracias.
Hola, Luismiguelsec.
No conozco el plugin, pero debería tener una opción para ocultar el menú predeterminado. La clase del menú de Zerif es
.navbar-toggle.collapsed.Saludos.
buenas tardes, muchas gracias por su contenido, quisiera que en el menu hamburguesa al pasar el mouse por un item del menu, se desplegara el submenu sin dar click en el recuadro sapotico, como es posible, o dando click en el item principal se desplegue el submenu. gracias.
Hola, Luismiguelsec.
Si te referís al efecto que se muestra en la demo, se logra con el plugin Max Mega Menu.
Saludos.
muchas gracias, por aclararme lo del efecto del demo en el menu hamburguesa, existe documentacion sobre como instalarlo o incluirlo en el tema?
¡Hola! Estoy montando mi web y no tengo experiencia en esto, así que realmente me está sirviendo de mucho todo el contenido que publicas acerca de Zerif Lite, muchas gracias de antemano.
Tengo muchas dudas pero en relación con este post, dos en concreto:
– Tanto la hamburguesa como otros botones (como las páginas de menú) al pasarles por encima el ratón se vuelven rojos, ¿habría alguna manera de cambiar este color o, al menos, eliminarlo?
– Gracias a tu tutorial he podido cambiar de color las líneas de la sección “Nuestro enfoque” (junto con el color de los círculos). En otras páginas personalizadas creadas por mi como “Sobre Nosotros” o “Tienda” de Woocommerce me salen estas mismas líneas debajo del título de la página pero en el color rojo del tema, y me gustaría poder eliminarlas o cambiarlas de color.
No sé manejar códigos pero he estado copiando y pegando en otras entradas que has publicado al “CSS adicional”, sería estupendo poder solucionarlo de esta manera.
¡Muchas gracias y un saludo!
Hola, Mª Ángeles.
Gracias por tu comentario 🙂
Para la primera duda, la respuesta está aquí (punto 2).
Para la segunda, aquí.
Saludos.
Hola Ana tengo un problema con la plantilla mis noticias de blog no se pueden leer completa y no encuentro solución me podrías ayudar?? muchas gracias
Hola, Javier.
Fijate en esta respuesta. Y la plantilla de página que debe estar seleccionada es Blog.
Saludos.
Muy buenas,
Tengo un leve problema, me interesa cambiar la posición de la hamburguesa en el móvil, lo tengo a la derecha y me gustaria cambiarlo a la izquierda.
Soy nuevo en esto y no encuentro la forma para hacerlo. ):
Saludos
Hola, Manu.
El código que tendrías que usar (en la hoja de estilos del tema hijo, o en el recuadro CSS adicional del Personalizador) es:
@media screen and (max-width:767px) { .menu-align-center .responsive-logo > a { float: right; } .navbar-toggle { float: left; } }Saludos.
Ese codigo me servio, pero solo se ve el menu a la izquierda en el movil y no en el celular, se puede colocar para que en ambas partes se vea a la izquierda?
buen dia, tambien quisiera saber como poner el boton de busqueda en el header al lado del logo, y no dentro del menu desplegable. muchas gracias.
Me temo que eso no es posible sin un nivel de edición muy grande. 🙁
Hola, Luismiguelsec.
Para que tome efecto en la vista de escritorio tenés que usar solo las clases (eliminá la línea
@media screen and (max-width:767px) {y la última}).Saludos.
Hola Ana… muchisimas gracias por tu ayuda… nos estan dando muchisima luz con este tema. Para los novatos no sabes lo que significa tanto tutoriales.
Te cuento, tres preguntitas seguro que faciles para ti.
1- Se puede poner un gift en lugar de foto en el fondo?¿¿?
2- La hamburguesa del menu en el movil se me ve de color rojo. Y los cuadrados para indicar que hay submenus tambien… como podria cambiar ese color a otro?¿¿??¿
3- Por ultimo, como puedo meter un boton (como el de la seccion BottomButton Ribbon) en Our focus section ¿?¿?¿
Muchas gracias de antemano. Un saludo
Hola, Carlos.
1. Te respondí aquí.
2. Usá el siguiente código (cambiá
#000000por el valor que necesites):.navbar-toggle.active, .navbar-toggle.collapsed, .dropdownmenu { background-color: #000000 !important; }3. Podés usar el siguiente código:
<a href="#" class="btn btn-primary custom-button green-btn">Botón</a>en un widget de texto (editá el enlace y la etiqueta del botón).Saludos.
Hola un gusto saludarte a la vez pedirte ayuda, sabes instale la ultima version lite, y tengo varias consutas.
¿¿Se puede instalar una full ?? ( no me dejo baje algunas)
Instale la version lite pero no me da la opcion del menu standart y no tengo menu en mi sitio :S…
me puedes decir los manuales que puedo ir leyendo paso a paso, o sea ya intale modifique hice todo lo que indicas en un manual de aca, pero ahora quiero saber lo que viene y como soy muy disperso no se por donde partir.
como cambiar la letra del menu, los colores, activar el woo, el tema de seguridad y todo lo que pueda venir.
Gracias amiga por tu tremendo aporte ! de verdad se agradece !
Hola, Cristian.
Gracias por tu comentario.
Para comenzar, deberías ver el tutorial del tema. El menú lo creás desde Apariencia > Menús, tal como se explica allí, en la sección Configurar el menú. Lo demás es terreno de temas hijos, personalización vía CSS o plugins. Para más información sobre WordPress, te recomiendo la Guía WP Fácil.
La versión PRO de Zerif tiene opciones para cambiar colores e incluye cuatro secciones más (Mapa, Portfolio, Suscripción y Tablas de precios), además de permitir usar un vídeo de fondo y cambiar el orden de las secciones.
Saludos.
Buenas noches,
Fantástico estos tutoriales… estoy aprendiendo una barbaridad.
Tengo una pregunta y no sé si es algo que se puede hacer por anclajes o no…
Mi duda es si es posible crear una página, y que por tanto aparezca arriba en el menú, en la que el visitante al hacer click sea redirigido a la sección de “contacto” del front page.
Muchas gracias
Hola, Borja.
Gracias por tu comentario.
El menú de navegación es único para todo el sitio, así que los enlaces que le agregues funcionarán tanto en la página de inicio como desde una página interna.
Saludos.
Hola Ana hace tiempo que no trabajo en la pagina
Y me gustaria meter un icono, a modo de menu hamburguesa, unicamente con las banderas de los idiomas dentro.
Pero quitando la barra de menu, y el logo, ya que siendo todo una pagina, no lo veo necesario, solo un pequeño enlace a los idiomas, ya que mi sitio es trilingue.
Es factible esto?
Muchas gracias de antemano, un saludo
Hola, Aritz.
Es posible a medias. Primero tendrías que desactivar el plugin de mega menú. Luego usarías el código de este tutorial, más lo siguiente:
a.navbar-brand { display:none !important; }En el menú solo añadirías el conmutador de idioma, pero la barra no se podría quitar, ya que es la que contiene los enlaces.
Saludos.
Hola, Andrés.
Sí, podés agregar al menú los elementos que quieras y ordenarlos para que sean subelementos, desde Apariencia > Menús. Te recomiendo la Guía WP Fácil, donde se explica esto en el capítulo Actualizar el menú.
Saludos.
Hola, se pueden hacer menús anidados en Zerif lite, y si se puede ¿como se hace?.
Muchas gracias, muy buenos los tutoriales.
Hola, simplesmente magnifico sus tutoriales, y me gustaria hacer una pregunta, podria cambiar el orden de las secciones? Ej.: poner la sección contacto en la seccion inicial? Gracias
Hola, Francisco.
Gracias por tu comentario. Sí, es posible, creando un tema hijo y editando el archivo
front-page.php(moviendo el código correspondiente a/* CONTACT US */arriba de/* OUR FOCUS SECTION */).Para más información podés revisar esta entrada.
Saludos.
buenas tardes, creo el custom.css, le añado el código que pones y no me hace absolutamente nada, se me queda igual.
sabes algo que pueda estar haciendo mal?
Gracias
Hola, PVR.
¿Activaste el tema hijo?
Sí, lo activé ya que lo usé anteriormente para poner un slider.
Tengo un style.css en el cual sale Hoja de estilo (style.css) tal y como lo he puesto, entre paréntesis.
Y, a parte, el custom.css pero de la misma forma que el “Hoja de estilo” y sin paréntesis, así que parece como si no lo detectara. Pero no sé si és eso, me gustaría poder pasarte una foto pero no me deja.
Muchas gracias por contestar y por tus magníficos tutoriales.
Fijate que esté presente la siguiente línea en el archivo
functions.php, dentro de la funciónchild_enqueue_styles():Y otra cosa para tener en cuenta, el código que pegues en el archivo
custom.csstiene que estar por fuera del último/*(de lo contrario se considera como un comentario y no se interpreta como estilo).Perfecto! Eres un crack!
Ya me funciona, sólo que ahora en la página justo debajo del menú y el logo me aparece un recuadro en blanco antes de la imagen principal. No sé si es por haber puesto dos wp_enque_style.
Perdona mi poco conocimiento pero estoy empezando.
Y otra vez, muy agradecido, de verdad!
Hola Ana, agradecido contigo tus tutoriales han sido de gran ayuda. No tengo mucha experiencia en programación pero seguir paso a paso tu consejos ha sido realmente divertido y fácil de seguir. No se si hay algún tutorial para hacer que el logo disminuya al hacer scroll así como el de tu pagina. Agradezco mucho tu ayuda.
Hola, Jonathan.
Gracias por tu comentario. Lamentablemente no es posible lograr ese efecto en este tema sin reescribir prácticamente todos los estilos del menú. 🙁
Saludos.
Hola, muy buenos los tutoriales en español. Gracias.
He buscado por todos lados y no tuve suerte, cómo hago para que el menú de arriba no quede fijo?, o sea, cuando bajo se vaya con todo el contenido hacia arriba?
Estuve buscando en todo el código el famoso “fixed” pero no tuve suerte.
Muchas gracias!
Hola, Miguel.
Gracias por tu comentario.
Tendrías que agregar el siguiente código a la hoja de estilos del tema hijo (o en el recuadro CSS adicional del Personalizador):
#main-nav, #main-nav.fixed { position: relative; }Espero que te sirva.
Saludos. 🙂