Puede ser frustrante cuando el menú de navegación de WordPress de repente se desplaza detrás de la barra de administración. Hemos visto que esto les sucede a muchos usuarios, especialmente después de instalar un nuevo tema o activar ciertos complementos.
Este problema es más común de lo que podrías pensar. Muchos temas de WordPress no tienen en cuenta el espacio que ocupa la barra de herramientas de administración que se muestra a los usuarios conectados, lo que puede descolocar tu menú.
En esta guía, te mostraremos varias formas de solucionar el problema del menú de navegación de WordPress que aparece debajo de la barra de administración. Ya sea que desees una solución rápida no técnica o una solución CSS limpia, encontrarás un método que funcione para tu sitio.
¿Por qué la barra de administración de WordPress se superpone con el menú de navegación?
Si tu menú de navegación de WordPress parece estar oculto o superpuesto con la barra de administración, es posible que estés lidiando con un problema de visualización común.
Hemos visto que este problema ocurre cuando el CSS de un tema no tiene en cuenta adecuadamente la altura de la barra de administración. El CSS luego oscurece partes del encabezado de tu sitio, incluido el menú de navegación.
Es posible que notes que algunos elementos del menú son difíciles de hacer clic o que todo el menú está parcialmente cubierto al ver tu sitio. Esto puede ser frustrante, especialmente cuando afecta la usabilidad de tu sitio web.
Hay algunas razones comunes por las que esto podría suceder:
- Conflictos de tema: A veces, el CSS de tu tema no tiene en cuenta la barra de administración, lo que provoca que el menú se posicione incorrectamente.
- Conflictos de plugins: Un plugin que modifica el diseño del front-end podría causar involuntariamente que el menú se superponga con la barra de administración. Esto puede incluir plugins que agregan mega menús o banners en la cabecera.
- CSS personalizado: Si has agregado CSS personalizado a tu sitio, podría estar interfiriendo con la correcta visualización de tu menú.
Este problema puede afectar la usabilidad de tu sitio, dificultando la navegación de los usuarios. Afortunadamente, hay varias maneras de solucionar este problema, comenzando con una solución simple que no requiere codificación.
Aquí tienes un resumen de las soluciones que te mostraremos. Puedes saltar a la que te resulte más cómoda:
- Solución 1: Ocultar la barra de administración a través de la configuración del perfil de usuario
- Solución 2: Solucionar la superposición con CSS personalizado
- Solución 3: Verificar conflictos de plugins
- Recursos adicionales para la administración de WordPress
Solución 1: Ocultar la barra de administración a través de la configuración del perfil de usuario
Esta es la forma más fácil de solucionar el problema si no te sientes cómodo agregando código. Funciona bien para principiantes o usuarios que no tienen permiso para cambiar el tema o agregar CSS personalizado.
En lugar de solucionar el diseño, este método oculta la barra de administración por completo para que ya no cubra el menú.
Atención: Ocultar la barra de administración significa que ya no verás enlaces rápidos para editar publicaciones, administrar comentarios o acceder a actualizaciones de plugins mientras navegas por tu sitio.
Además, esta configuración solo se aplica a tu cuenta de usuario. Si otras personas usan el sitio, deberán seguir los mismos pasos a continuación.
Para hacer esto, inicia sesión en tu panel de WordPress y ve a Usuarios » Perfil en el menú de la izquierda.
Desplázate hacia abajo hasta la sección Barra de herramientas y desmarca la casilla que dice 'Mostrar barra de herramientas al ver el sitio'.
Haz clic en el botón 'Actualizar perfil' en la parte inferior para guardar tus cambios.
Por qué funciona esto
Al desactivar la barra de administración, eliminas el elemento que está desplazando el menú. Es una solución simple que evita problemas de diseño más profundos, especialmente en sitios donde solo los usuarios registrados ven el problema.
Solución 2: Solucionar la superposición con CSS personalizado
Si te sientes cómodo usando código personalizado y quieres una solución a largo plazo, entonces agregar CSS es el camino a seguir. Esto te permite controlar exactamente cómo se comporta el encabezado, sin desactivar la barra de administración.
Recomendamos usar el plugin WPCode para agregar CSS personalizado de forma segura. Funciona con cualquier tema y te permite aplicar tu solución solo para usuarios registrados (ya que los invitados no ven la barra de administración).
Paso 1: Inspeccionar el elemento de encabezado
Haz clic derecho en el encabezado o menú de navegación de tu sitio y elige 'Inspeccionar' en tu navegador. Esto abrirá las herramientas de desarrollador.
Pasa el cursor del mouse sobre el HTML.
El navegador resaltará el elemento correspondiente en la página.
Busca una clase o ID que envuelva tu navegación. Usarás esto en tu CSS personalizado.
Paso 2: Instalar WPCode
Instala y activa el plugin WPCode. Es fácil de usar para principiantes y te permite agregar código sin editar los archivos del tema.
Puedes usar la versión gratuita para este tutorial, pero la versión Pro ofrece funciones adicionales para proyectos más grandes.
Paso 3: Agregar el fragmento de CSS
Ve a Fragmentos de código » Agregar fragmento y elige 'Agregar tu código personalizado (Nuevo fragmento)'.
Primero, dale a tu fragmento un nombre descriptivo. De esa manera, podrás recordar fácilmente para qué sirve más tarde. Lo llamaremos 'Corregir barra de administración superpuesta'.
Luego, selecciona 'Fragmento de CSS' como tipo de código.
Después de eso, pega este código CSS en el editor:
.logged-in .main-navigation {
margin-top: 32px;
z-index: 9999;
position: relative;
}
Esto se dirige solo al menú de navegación para usuarios registrados, corrigiendo el problema sin cambiar la apariencia del sitio para los visitantes.
Si tu tema usa una clase o ID diferente, reemplaza .main-navigation con la que obtuviste de tu herramienta de inspección.
Paso 4: Usar lógica condicional inteligente
Desplázate hasta la sección 'Lógica condicional inteligente' en WPCode y actívala.
Establece la condición en 'Mostrar' si 'Registrado' es 'Verdadero'.
Luego haz clic en 'Guardar fragmento' y cámbialo de Inactivo a Activo.
Ahora visita tu sitio y comprueba si el menú aparece encima de la barra de administración.
Si no es así, ajusta el margin-top o modifica tu selector.
Por qué funciona esto
Algunos temas no tienen en cuenta la altura de 32px de la barra de administración. Este CSS agrega espacio y acerca tu encabezado, corrigiendo el diseño solo para los usuarios que ven la barra de administración.
Solución 3: Verificar conflictos de plugins
Si el menú todavía aparece debajo de la barra de administración después de intentar las soluciones anteriores, un conflicto de plugins podría ser la razón.
Algunos plugins agregan su propio CSS o JavaScript, lo que puede interferir accidentalmente con el diseño de tu tema, especialmente si modifican el área del encabezado o la navegación.
Hemos visto que esto sucede en sitios de clientes, y rastrear el plugin en conflicto a menudo resuelve el problema sin necesidad de tocar ningún código.
Paso 1: Desactivar todos los plugins
Ve a tu panel de control y dirígete a Plugins » Plugins Instalados.
Selecciona todos los plugins usando la casilla de verificación en la parte superior, elige 'Desactivar' en el menú de acciones masivas y haz clic en 'Aplicar'.
Ahora visita tu sitio web. Si el menú de navegación se ve normal, entonces uno de los plugins probablemente fue el culpable.
Paso 2: Reactivar plugins uno por uno
Regresa a la pantalla de ‘Plugins instalados’ y reactiva cada plugin individualmente. Después de cada uno, recarga tu sitio y revisa el menú.
Sigue haciendo esto hasta que el problema reaparezca. El último plugin que activaste es el que está causando el conflicto.
Paso 3: Decide qué hacer
Una vez que hayas identificado el plugin problemático, tienes algunas opciones. Primero, intenta contactar al desarrollador del plugin para obtener soporte. Es posible que ya conozcan el problema o te sugieran una solución temporal.
Si no hay una solución disponible, puedes buscar un plugin alternativo que ofrezca características similares sin causar problemas de diseño.
Recursos adicionales para la administración de WordPress
Aquí tienes algunos recursos más que podrían resultarte útiles:
- Cómo deshabilitar la barra de administración de WordPress para todos los usuarios excepto los administradores
- Cómo solucionar el problema de la barra de administración faltante en WordPress (métodos)
- Cómo arreglar el editor de archivos de temas que falta en el administrador de WordPress (solución fácil)
- Cómo agregar enlaces de acceso directo personalizados a la barra de administración de tu WordPress
- Guía para principiantes para solucionar errores de WordPress (paso a paso)
Esperamos que las soluciones que compartimos resuelvan el problema de la barra de administración que causa el problema de visualización del menú de navegación o la cabecera en tu sitio web.
También te puede interesar nuestro manual sobre cómo solucionar los errores más comunes de WordPress o echar un vistazo a nuestros consejos para personalizar el área de administración de WordPress según tus necesidades.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Samuel
hace un tiempo, mientras trabajaba para un cliente, tuve este problema y se resolvió editando el CSS del tema, fue así porque entiendo de CSS. Este artículo aportó otro método que normalmente no se me ocurriría al tratar con este tipo de problema. Siempre es bueno estar armado con varias formas de resolver problemas de WordPress. Ahora tengo otras opciones si me encuentro con esto de nuevo. Artículo muy útil. Gracias.