Tutorial WordPress: Eliminar subrayado de enlaces del menú solo en desktop

Introducción

Este tutorial explica, paso a paso y con todo lujo de detalles, cómo eliminar el subrayado de los enlaces del menú en WordPress exclusivamente en vista desktop (escritorio). Incluye las distintas opciones de aplicación (CSS en el Personalizador, child theme, o mediante funciones), ejemplos concretos adaptables a diferentes temas y recomendaciones de accesibilidad y resolución de problemas.

Concepto clave

El subrayado de los enlaces es una propiedad visual controlada por CSS (text-decoration). Para cambiarla solo en desktop utilizaremos una media query con min-width y aplicaremos estilos específicos a los selectores del menú de tu tema. Es importante mantener un foco accesible para usuarios con teclado, por lo que se recomienda no eliminar por completo la indicación de foco.

Resumen de pasos

Identificar el selector CSS que usa tu tema para los enlaces del menú.
Decidir el punto de corte (breakpoint) que consideras desktop (por ejemplo 1024px o 1025px).
Agregar CSS dentro de una media query para eliminar text-decoration en desktop.
Probar hover y focus para mantener accesibilidad y experiencia de usuario.
Comprobar caché, minificación y conflictos de especificidad si no se observan cambios.

1. Identificar el selector del menú

Los temas de WordPress utilizan nombres distintos para el menú. Algunas clases habituales son:

.main-navigation a
.site-navigation a
.primary-menu a
.menu a o .menu li a
.navbar-nav .nav-link (Bootstrap-based themes)

Abre las herramientas de desarrollador (Inspector) del navegador (F12) y localiza el enlace del menú para ver la clase exacta. Anota el selector más apropiado para no afectar otros enlaces no deseados.

2. CSS básico: eliminar subrayado solo en desktop

Ejemplo genérico que cubre varios selectores comunes. Ajusta las clases a las que corresponda tu tema. Aquí usamos 1025px como breakpoint para considerar desktop.

@media (min-width: 1025px) {
  / Selectores comunes: cambia o añade según tu tema /
  .main-navigation a,
  .site-navigation a,
  .primary-menu a,
  .menu a,
  .navbar-nav .nav-link {
    text-decoration: none
  }

  / Mantener pista visual en hover/focus (recomendado por accesibilidad) /
  .main-navigation a:hover,
  .main-navigation a:focus,
  .site-navigation a:hover,
  .site-navigation a:focus {
    text-decoration: underline
  }

  / Estilos de foco más visibles (opcional y recomendado) /
  .main-navigation a:focus,
  .site-navigation a:focus {
    outline: 3px solid rgba(21,156,228,0.25)
    outline-offset: 2px
  }
}

Variación: quitar subrayado visual pero mostrar borde en hover

Si quieres eliminar el subrayado por defecto pero mantener un indicador visual al pasar el ratón, puedes usar border-bottom en hover en lugar de text-decoration.

@media (min-width: 1025px) {
  .main-navigation a,
  .site-navigation a {
    text-decoration: none
    border-bottom: none
    padding-bottom: 3px / espacio para el borde si lo necesitas /
  }

  .main-navigation a:hover,
  .main-navigation a:focus {
    border-bottom: 2px solid currentColor
  }
}

3. Dónde aplicar el CSS

Personalizador → CSS adicional: Método más simple. Ve a Apariencia → Personalizar → CSS adicional y pega el CSS dentro de la media query. Es inmediato y seguro.
Child theme (style.css): Si trabajas con un child theme, añade el CSS en style.css del child theme. Recomendado si haces cambios permanentes y organizados.
Encolar CSS desde functions.php: Para incluirlo dinámicamente (o si prefieres añadir CSS inline mediante PHP). Ejemplo abajo.
Plugins de CSS personalizado: Plugins como Simple Custom CSS and JS permiten pegar CSS personalizado sin tocar archivos del tema.

Ejemplo: añadir CSS inline desde functions.php

Sustituye mi-tema-style-handle por el handle real de la hoja de estilos de tu tema (por ejemplo twentytwentythree-style o el que aparezca en el código del tema). Si no conoces el handle, es más seguro usar el método del Personalizador o child theme.

4. Problemas comunes y soluciones

No se aplican los estilos: Verifica la especificidad de la regla original. Si el tema usa selectores más específicos o usa !important, tendrás que aumentar la especificidad o, como último recurso, usar !important:
```
@media (min-width: 1025px) {
  header .main-navigation li.menu-item > a {
    text-decoration: none !important
  }
}
    
```
Usar !important solo cuando sea necesario.
Cache / Minificación: Si usas plugins de cache o optimización (WP Rocket, Autoptimize), purga la caché y reconstruye los CSS minificados.
Selector incorrecto: Usa la herramienta Inspector para identificar la regla que añade el subrayado y anula esa misma regla (o una más específica).
Mobile sigue sin subrayado: Esto es intencional si aplicas la media query con min-width. Si quieres mantener subrayado en móvil, no pongas la regla global fuera de la media query.
Accesibilidad: No elimines la indicación de foco. Asegúrate de proporcionar un estilo visible en :focus (outline o similar) para usuarios que navegan con teclado.

5. Buenas prácticas y recomendaciones

Usa un breakpoint coherente con tu tema. Muchos temas usan 768px o 1024px. Prueba en diferentes tamaños de pantalla.
Mantén un indicador visual de foco (outline, cambio de color, o subrayado en :focus).
Evita aplicar reglas demasiado genéricas que afecten enlaces fuera del menú. Limita el scope añadiendo contenedor del header o nav específico.
Documenta el cambio en tu child theme o en un archivo de estilos para futuras referencias.

6. Ejemplos específicos para temas populares

A continuación, ejemplos de selectores típicos en distintos themes. Ajusta según tu inspección:

Twenty Twenty-One / Twenty Twenty-Three:

@media (min-width: 1025px) {
  .menu > li > a,
  .main-navigation a {
    text-decoration: none
  }
}

Astra:

@media (min-width: 1025px) {
  .main-header-menu .menu-item a {
    text-decoration: none
  }
}

Genesis child:

@media (min-width: 1025px) {
  .nav-primary .genesis-nav-menu a {
    text-decoration: none
  }
}

Elementor header (nav menu):

@media (min-width: 1025px) {
  .elementor-nav-menu a {
    text-decoration: none
  }
}

7. Comprobaciones finales

Prueba en varios navegadores (Chrome, Firefox, Edge, Safari) y diferentes resoluciones de pantalla.
Verifica el comportamiento de hover y focus con teclado (Tab) y ratón.
Borra caché y activa/devuelve la minificación si corresponde para ver cambios en producción.
Si no ves cambios, revisa en el Inspector cuál regla tiene prioridad y ajusta la especificidad.

Conclusión

Eliminar el subrayado de enlaces del menú solo en desktop es una tarea CSS sencilla, pero requiere localizar correctamente el selector del menú, aplicar la media query adecuada y cuidar la accesibilidad (foco). Usa el Personalizador para pruebas rápidas y opciones más avanzadas (child theme o functions.php) para cambios permanentes. Si sigues los ejemplos y las recomendaciones de especificidad y pruebas, el cambio será estable y seguro.

SushiHost