Aprende con este tutorial cómo colocar un menú a cada lado del logotipo centrado en el child theme de Genesis Infinity Pro mediante código.
En un tutorial anterior, a petición de uno de nuestros suscriptores, expliqué cómo mostrar dos menús laterales con el logo centrado en Genesis Sample.
A raíz de este, otro usuario me preguntó cómo conseguir el mismo efecto pero con Infinity Pro, uno de los child themes de Genesis más populares de StudioPress.
Así que me puse manos a la obra.
Este sería el resultado final:
Vamos a ver cómo conseguirlo.
Pasos para mostrar dos menús separados por el logotipo en Infinity Pro
1. Modifica el fichero functions.php
1.1 Combina el menú primario y secundario
Lo primero que debes hacer es combinar ambos menús en el menú para móviles.
Para ello cambia las siguientes líneas en el fichero functions.php.
Para ver este código y los otros 1801 snippets de esta web,
identifícate o suscríbete aquí.
1.3 Renombra los menús
Para realizar la última modificación en el archivo functions.php sustituye:
Para ver este código y los otros 1801 snippets de esta web,
identifícate o suscríbete aquí.
Con esto cambias el nombre de los menús a primario y secundario.
Ya tienes la parte estructural resuelta, vamos al diseño. 😉
2. Modifica el fichero style.css
Una vez reestructurados los menús debes editar el CSS para conseguir que el logo se muestre centrado y los menús a cada lado.
Para ello, añade el siguiente snippet al final 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 bloque de código consigues que se muestren ambos menús a cada lado del logotipo en pantallas mayores de 800 píxeles de ancho.
En dispositivos móviles mostrará el menú hamburguesa habitual.
2.1. Convierte uno de los items del menú en un botón
Este apartado es opcional, pero si lo que buscas es dejar clara tu llamada a la acción (CTA), te recomiendo destacar uno de los items del menú.
Para ello, necesitas darle una clase de CSS al elemento del menú como viste en el artículo dedicado a ello.
En este caso puedes aprovechar la clase .button y le darle algunos retoques agregando este fragmento al final de style.css:
Para ver este código y los otros 1801 snippets de esta web,
identifícate o suscríbete aquí.
¡Ya lo tienes!
Te invito a personalizar el color y otras características del botón para que esté alineado con tu imagen de marca.
Conclusiones
Si quieres mostrar el logo centrado con el menú dividido en dos a ambos lados del mismo en Infinity Pro ahora sabes hacerlo gracias a este tutorial.
Aunque este snippet está pensado para una plantilla concreta, puede servirte de guía para modificar otros child themes de Genesis Framework.
¿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. 😉
