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.
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 897 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 897 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. 😉
