• 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 dos menús laterales y el logotipo centrado en Infinity Pro

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:

menus latetales logo centrado Infinity Pro
Ejemplo de Infinity Pro con menú principal dividido en dos por el logo centrado.

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

Cabecera CSS Genesis Framework Infinity Pro Menú PHP

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?