Los menús son clave en cualquier web, pero ¿por qué quedarte con lo básico cuando puedes darles estilo propio? Aprende a personalizar los menús de WordPress con CSS.

El pasado sábado 7 de marzo tuvimos el placer de asistir a la WordCamp de Madrid. Anto Fernández, CEO de Destaca Imagen, impartió el taller: «Personaliza menús de WordPress con CSS» en el que compartió con todos los asistentes los mejores trucos y técnicas para hacer que los menús de sus webs se vuelvan más atractivos y funcionales.

Taller WordCamp Madrid 2025 - Personaliza los menús de WordPress con CSS

Efectos en los enlaces al pasar el cursor, agregar iconos a los enlaces del menú, mostrar u ocultar enlaces solo en móviles, incluir botones para destacar llamadas a la acción, aplicar cambios fácilmente con el personalizador de WordPress y crear animaciones básicas con CSS fue todo lo que los participantes aprendieron. Pero si no pudiste acudir no te preocupes porque tenemos la charla grabada al completo.

Os dejamos el enlace aquí mismo para que todos podáis conseguir que vuestros menús no solo funcionen, sino que también impacten: «Anto Fernández WordCamp Madrid – Personaliza los menús de WordPress con CSS»

Si después de revisar el taller tienes dudas o quieres hacernos alguna propuesta te dejamos aquí un enlace a nuestra página de contacto.

Además, tal y como Anto prometió en Madrid vamos a dejar al final del post el código de CSS que utilizó. Para que podáis copiarlo, modificarlo y adaptarlo a todos vuestros proyectos.

Por último, agradecer a todos los que acudisteis al taller en WordCamp Madrid 2025. Vuestra energía y ganas de aprender han hecho que esta sesión sobre personalización de menús en WordPress con CSS sea inolvidable.

Un enorme aplauso también para los organizadores del evento, que han hecho posibles unas jornadas espectaculares y un espacio donde compartir conocimiento y pasión por WordPress.

Y si estás leyendo esto desde nuestro blog, ¡gracias por formar parte de esta comunidad! 💙 Esperamos que este resumen te ayude a mejorar tus menús y a seguir explorando el diseño web con creatividad. Y si queréis estar al tanto de nuevos tutoriales, recursos, plugins y plantillas no olvides suscribirte a nuestro newsletter.

CÓDIGO CSS

#menu-principal li a{

color:#5666A2;

}

#menu-principal li a:hover{

color:#803A78;

}

#menu-principal li.nuevo a{

font-weight:bold;

}

/* ENLACE DESTACADO */

#menu-principal li.nuevo a:before{

content:’Nuevo’;

position:absolute;

top:-15px;

font-weight:lighter;

font-size:12px;

transition:all ease-in 0.15s;

}

#menu-principal li.nuevo a:hover:before{

top:-18px;

}

/* ICONO */

#menu-principal li.icono a{

background-size:23px;

background-image:url(«https://shop.destacaimagen.com/pruebas/wp-content/uploads/2025/03/user-circle-svgrepo-com-1.svg»);

background-repeat:no-repeat;

background-position:5px 50%;

padding-left:30px;

margin-left:15px;

transition: all ease 0.15s;

}

/* BOTON*/

#menu-principal li.icono a:hover{

background-position:0px 50%;

}

#menu-principal li.botonazul:hover:before{

background:#43897f;

}

/* EFECTO LINEA*/

#menu-principal li.botonazul a:before{

content:»;

position:absolute;

display:block;

top:50%;

left:0px;

width:100%;

margin-top:-15px;

height:30px;

background:#81C0B7;

border-radius:30px;

z-index:-1;

}

#menu-principal li.botonazul a{

color:#fff;

}

#menu-principal li.botonazul a:hover:before{

background:#49968a;

}

/* AJUSTES MÓVIL */

/* Cuando el cotenido es igual o menor de 768px*/

@media(max-width:768px){

#menu-principal li.botonazul a:before{

left:10px;

width:85px

}

#menu-principal li a{

line-height:50px;

}

/* Cuando el contenido es igual o mayor de 768*/

@media(min-width:769px){

/* EFECTO HOVER */

#menu-principal li:not(.botonazul) a:after{

content:»;

display:block;

width:0;

height:2px;

background:#803A78;

position:absolute;

left:10px;

bottom:5px;

transition:all ease 0.15s;

}

#menu-principal li a:hover:after{

width:80%;

}

Categorias: Sin categoría

Personaliza los menús de WordPress con CSS: Código y Ejemplo

Deja una respuesta Cancelar la respuesta

Personaliza los menús de WordPress con CSS: Código y Ejemplo

te pueden interesar

Deja una respuesta Cancelar la respuesta