• 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

Destacar el último elemento del menú con un botón en el N Theme

Descubre cómo convertir el último elemento del menú superior del N Theme en un botón mediante código.

Hace muy poco, Sergio, uno de nuestros suscriptores, me preguntó:

¡Hola! No se si sería posible, pero estaría genial un tutorial para añadir un botón al menú superior en los themes P y N de AsiThemes, como está en la Guía del Emprendedor.

Así que me puse manos a la obra. De hecho, es un truco muy eficaz para colocar el CTA, tal y como lo hacen Joan Boluda en la web Guía del emprendedor y el equipo de AsiThemes en su página.

Para incluir un botón en el último elemento del menú en el N Theme, solo necesitas realizar ciertas modificaciones de CSS.

Destacar último item menú boton N Theme

Vamos allá:

Snippet para añadir un botón en el menú superior del N Theme

Si deseas obtener el mismo resultado que ves en la imagen anterior, introduce este código en el apartado Site Header o al final del fichero style.css:

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

Con este fragmento, aplicas los estilos que buscas al último ítem del menú principal.

En este ejemplo concreto, utilizas el color de fondo que viene por defecto en el N Theme (el mismo que ves en la Guía del emprendedor), pero puedes cambiarlo a tu gusto.

También tienes la opción de crear un botón más redondeado aumentando el valor de border-radius. Y ¡listo! Has convertido el último elemento del menú en un CTA perfecto.

Conclusiones

Ya ves qué fácil es insertar un botón de llamada a la acción en el menú superior del N Theme. Y aunque este snippet está creado para el N Theme, puedes usarlo de guía para modificar otros temas de AsiThemes.

¿Quieres destacar otro elemento del menú en lugar del último? ¿Te interesa que el color del botón se pueda elegir desde el personalizador? Cuéntame qué necesitas para que prepare un tutorial como este, a medida. Ventajas de ser suscriptor. 😉

Cabecera CSS Menú N 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 identificarte 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?