Zerif Lite: ¿Cómo desactivar el icono “hamburguesa” para el menú en dispositivos móviles?

11 comentarios

¡Atención! Zelle Lite (ex Zerif) ya no se actualiza. Cambia a:

Hestia

Hestia

Multipropósito
Adaptable a todos los dispositivos
Fácil de configurar

Más opciones en Hestia Pro

Neve

Neve

Súper rápido
Compatible con AMP
Hecho para Elementor

Más opciones en Neve Pro

Tutoriales de Zerif Lite en español

Por: Caribdis.Net

Publicada: 3 de abril de 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) {
.navbar-inverse .navbar-brand {
    float: none;
}
}

Zerif Lite - iPhone - Logo centrado

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

Últimas entradas de Caribdis.Net (ver todo)

Se responden todas las dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios, por lo general dentro de las 24/72 hs. Así que asegúrate de suscribirte a las respuestas para recibirlas en tu casilla de correo electrónico (podrás cancelar la suscripción cuando lo desees). Con la suscripción al blog, recibirás en tu correo únicamente las nuevas entradas que se publiquen.

Ten en cuenta que muchas de las preguntas ya fueron respondidas en distintas entradas; recuerda que puedes usar el buscador de la barra lateral, y Ctrl+F para buscar texto dentro de una página.

Esta u otras entradas pueden contener enlaces de afiliado. Esto significa que si usas un enlace para adquirir algún producto recomendado, recibiremos una comisión de afiliados, la cual no te generará ningún costo adicional.

11 Comentarios

  1. luis alberto

    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

    • Caribdis Diseño Web

      Hola, Luis Alberto.

      Tenés activado el modo de mantenimiento.

      En cuanto a los títulos, editalos y guardá los cambios.

      Saludos.

  2. victor

    Puedo eliminar el menu en un tema de genesis, con el mismo sistema?

    • Caribdis Diseño Web

      Hola, Víctor.

      Este código solo sirve para Zerif.

      Saludos.

  3. fabricio

    Ola ! Iene como ácer lo tamanho de la fonte ficar proporcional e não demasiado grande ?

    • Caribdis Diseño Web

      Hola, Fabricio.

      En el archivo custom.css o 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.

      • Fabricio

        Muchas gracias … Fue perfecto con 10px

  4. BenjaC

    Qué tal, con la duda. Tengo instalado un tema gratuito llamado Astrid; funciona también o únicamente con Zerif?

    • Caribdis Diseño Web

      Hola, BenjaC.

      Este código solo funciona con Zerif.

      Saludos.

  5. Alberto

    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

    • Caribdis Diseño Web

      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.

Los comentarios están cerrados. ¿Por qué?

Pin It en Pinterest

Compartir esto

Compartir es agradecer

Si esta publicación te resultó útil, puedes compartirla y ayudar a otros. ¡Gracias!