• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Mostrar siempre el menú de hamburguesa en el S Theme

Descubre cómo conseguir que el S Theme presente el menú de hamburguesa en todos los dispositivos mediante código.

El S Theme de AsiThemes es una plantilla muy atractiva para mostrar el porfolio. Por defecto, exhibe el menú tradicional cuando se visualiza desde ordenadores (pantallas de más de 990px de ancho) y el menú de hamburguesa en dispositivos más pequeños.

Siendo un tema con un diseño tan atractivo y teniendo en cuenta que lo que busca es provocar un impacto visual en el lector, es posible que te interese sacrificar un poco la «usabilidad» en favor de una estética más moderna o minimalista. 

Una forma de conseguirlo sería mostrar el menú de hamburguesa también en los dispositivos de escritorio.

S Theme menu hamburguesa

Para hacerlo solo necesitas realizar algunas modificaciones de CSS. 

Snippet para visualizar siempre el menú de hamburguesa en el S Theme

Si deseas obtener el mismo resultado que ves en la imagen superior, sustituye este código en el apartado Site Header del fichero style.css:

Para ver este código y los otros 1801 snippets de esta web,
identifícate o suscríbete aquí.

Con este cambio, eliminas el media query (de 990px) de la cabecera para que la web muestre el menú de hamburguesa.

Pero ahora mismo aún puede verse el menú tradicional, así que debes ocultar sustituyendo el siguiente fragmento en el apartado Widget Area del fichero style.css:

Para ver este código y los otros 1801 snippets de esta web,
identifícate o suscríbete aquí.

¡Ya está! Con este último paso consigues que deje de visualizarse el menú tradicional del widget área.

Conclusiones

Ahora ya sabes como dar un toque todavía más minimalista al S Theme forzando a que siempre muestre el menú tipo hamburguesa con solo cambiar unas líneas de CSS. 

Aunque este tutorial está pensado para el S Theme, puede servirte de guía para modificar otros temas de AsiThemes.

¿Prefieres que lo adapte a alguno de ellos en particular? Dímelo en los comentarios y prepararé un tutorial a medida.

Ventajas de ser suscriptor. 😉

Cabecera CSS Menú S Theme

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?