Aprende con este tutorial cómo colocar un menú a cada lado del logotipo centrado en Genesis Sample mediante código.
Una de las ventajas de ser suscriptor de Código Genesis es que puedes proponer nuevos tutoriales. Carlos me preguntó:
¡Hola, Nahuai!
Gracias por el código. ¿Podrías hacer un tutorial con el Genesis Sample sobre cómo dividir el menú principal en dos y que quede el logo en el centro? No sé si es muy difícil o no pero vamos, si se puede.
Muchas gracias de todas formas y ¡buen finde!
Saludos.
Esta petición es muy interesante, porque por razones de diseño o usabilidad a veces te interesará centrar el logo y mostrar un menú a cada lado.
Este sería el resultado final:
Hoy vas a aprender cómo conseguirlo para Genesis Sample, aunque este código puede servirte de guía para cualquier otro child theme de Genesis.
Nota: A partir de la versión Genesis Sample 3.0 los menús son compatibles con AMP y la estructura de ficheros ha variado. He actualizado el tutorial para que se pueda aplicar a las nuevas versiones. Está probado con Genesis Sample 3.2, pero debería servir para todas las superiores a la 3.0.
Pasos para mostrar dos menús separados por el logotipo
1. Combina los menús
En primer lugar, combina los dos menús en uno. Esto especialmente importante para que en la versión responsive se muestres todos los elementos dentro del mismo menú.
Para ello en el fichero responsive-menus.php situado dentro de la carpeta /config/ sustituye:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
2. Reposiciona el menú secundario
A continuación, mueve el menú secundario del footer a la cabecera en el fichero functions.php sustituyendo:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
3. Renombra los menús
En el archivo theme-supports.php en la carpeta /config/ sustituye:
Para ver este código y los otros 2063 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.
4. Modifica el fichero style.css
Ahora sí, 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 2063 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 960 píxeles de ancho.
En dispositivos móviles mostrará el menú de hamburguesa habitual.
4.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 2063 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 estilo de marca y child theme.
Conclusiones
Si quieres mostrar el logo centrado con el menú dividido en dos a ambos lados del mismo en Genesis Sample 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. 😉
