Si has notado que el menú de navegación de tu web aparece debajo de la barra de administración de WordPress, no eres el único. Se trata de un problema común y lo he visto en montones de webs.
En este artículo vamos a ver qué hacer cuando la cabecera de la web, o parte de ella, está debajo de la barra de administración, comenzando con una solución simple, no técnica y que no requiere nada de código.
¿Por qué la barra de administración de WordPress se superpone a la cabecera de la web?
Si el menú de navegación de WordPress parece estar oculto o superpuesto con la barra de administración , es posible que se trate de un problema muy habitual de visualización.
Suele ocurrir cuando el CSS del tema o de algún plugin no tiene en cuenta correctamente la altura de la barra de administración. El CSS entonces oculta partes de la cabecera de tu sitio, incluido a veces el menú de navegación.
Debido a esto es posible que notes que es difícil hacer clic en algunos elementos del menú o que todo el menú está parcialmente cubierto cuando visualizas tu sitio. Esto puede resultar frustrante, especialmente cuando afecta la usabilidad de tu web.
Hay algunas razones comunes por las que esto podría suceder:
- Conflictos de temas: 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 entre plugins: un plugin que modifica el diseño de la interfaz puede provocar que el menú se superponga involuntariamente con la barra de administración. Esto puede incluir complementos que añaden megamenús o banners de cabecera .
- CSS personalizado: si has añadido CSS personalizado a tu sitio, es posible que esté interfiriendo con la visualización adecuada de la cabecera.
Afortunadamente, existen varias formas de solucionar este problema, comenzando con unas soluciones sencillas que no requieren nada de código. A continuación hay varias posibles soluciones a este problema, empieza por la que te parezca más sencilla para tu nivel de conocimientos.
Oculta la barra de administración desde los ajustes de perfil de los usuarios
Esta solución es ideal para usuarios que desean una solución rápida y sencilla sin tener que lidiar con ningún código. Es perfecta para principiantes o para cualquiera que esté preocupado por dañar accidentalmente el diseño de su sitio.
Además, si no tienes permisos para editar los archivos CSS o de tema del sitio, este método proporciona una forma sencilla de evitar el problema sin realizar cambios permanentes.
Nota: Esta solución se aplica a nivel de usuario, lo que significa que otros usuarios de su sitio deberán iniciar sesión en sus cuentas y repetir los siguientes pasos.
Primero, debes iniciar sesión en tu escritorio de WordPress. Luego, navega hasta la página Usuarios » Perfil en el menú de la izquierda.
Ve hacia abajo hasta la sección «Barra de herramientas» y luego desmarca la casilla junto a la opción «Mostrar la barra de herramientas al ver el sitio»
.
Después de eso, no olvides hacer clic en «Actualizar perfil» para guardar los cambios.
¿Por qué funciona esto?
Ocultar la barra de administración evita que interfiera con el menú de navegación en la parte visible de tu sitio. Como la barra de administración no se muestra, el problema de superposición se resuelve temporalmente, lo que hace que tu cabecera y sus menús sean completamente accesible tanto para ti como para tus visitantes.
Oculta la barra de administración para todos usuarios
Una solución similar a la anterior, pero más radical, es directamente desactivar la barra de administración por defecto para todos los usuarios, justo el comportamiento contrario al predeterminado de WordPress.
Si te animas hay varias maneras de conseguirlo, con plugins o códigos, tú eliges…
Como ocultar la barra de herramientas de administración de WordPress
¿Por qué funciona esto?
De este modo te evitas tener que informar a cada usuario que desactive la barra de administración o, lo que es peor, tener que hacerlo tú por ellos. Es fácil, es inmediato, no tiene pegas.
Ocultar la barra de administración con una extensión del navegador
Este tipo de problema los visitantes no lo van a tener, sino que lo tendrás tú, como administrador, y el resto de usuarios conectados, como redactores, o clientes si es una tienda online. Así, una posible solución, que lo es, sería instalar en tu navegador – y si quieres en el de tus colaboradores – una extensión que te permite ocultar la barra de administración de WordPress a un clic.
Se llama WordPress Admin Bar Control y, una vez instalada y activa, añade un icono de WordPress a tus iconos del navegador que, al hacer clic, cambia de color (normalmente de verde a rojo) y si estás navegando por una web WordPress a la que estás conectado, dejarás de ver la barra de administración.
Yo la uso hace años y es genial, la uso muchísimo, tanto para formaciones como a la hora de visualizar nuevas webs.
¿Por qué funciona esto?
Es una solución limpia y temporal para usuarios conectados, que son quienes lo necesitan. No requiere código, solo instalar una extensión en el navegador.
Comprobar si hay conflictos entre plugins
Antes de meternos con (algo de) código, hay otra manera de intentar solucionar este problema, y es algo tan sencillo como revisar si alguno de los plugins entra en conflicto con otro o incluso con el mismo WordPress, y como resultado la barra de administración se superpone a la cabecera de la web.
Y es que, a veces, los plugins pueden introducir CSS o JavaScript que interfieren con el diseño del tema, e incluso con el de WordPress.
La comprobación es sencilla:
- Desactiva todos los plugins y comprueba si se arregla el problema de la barra de administración superpuesta.
- Si así fuera ve activando los plugins uno a uno hasta detectar con la activación de cuál de ellos vuelve el problema.
Si detectas que es uno de los plugins quien provoca este problema de visualización lo ideal sería que te pongas en contacto con su desarrollador, le informes, y le pidas que solucione el problema en una actualización futura, así la solución será para todos, no solo para ti.
Si no fuera posible solucionar el problema con el plugin, prueba a encontrar otro que realice la misma función, pero sin provocar el error de la superposición de la barra de administración.
Corrige el CSS del tema
Si no funciona nada de lo anterior entonces vamos a la solución definitiva, la que nunca falla, y es corregir el CSS del tema, pues descartado todo lo anterior, es lo que queda por revisar y corregir.
Lo primero es inspeccionar la cabecera de la web, haciendo clic derecho en la portada de la web sobre la misma, para abrir las herramientas de desarrollo del navegador, o inspector, y apuntar cuál es la clase CSS de la cabecera de tu tema.
Así, como en el siguiente ejemplo, vemos que el identificador CSS de la cabecera del tema (Divi en el ejemplo) es main-header o, quizás, main-header.et-fixed-header, es algo que debemos comprobar a continuación.
Porque ahora, lo que toca es añadir un poco de CSS, siendo lo más fácil desde el personalizador de temas, en la sección de CSS adicional, o sino en el CSS personalizado de los estilos, si usas un tema de bloques.
El CSS a añadir debe ser como el de este ejemplo:
/* Quitar error superposicion barra admin */
#id-de-tu-cabecera .clase-de-tu-cabecera {
margin-top: 20px; /* Ajusta esta valor dependiendo de lo que te pida el tema */
z-index: 10001;
position: relative;
padding-top:40px /* Ajusta esta valor dependiendo de lo que te pida el tema */
}En el código anterior debes sustituir el ID o clase de ejemplo por el/los tuyo(s) y, a continuación, modificar los valores de margin y padding hasta dar con el adecuado para que tu web se muestre perfecta, sin el menú de administración superpuesto a la cabecera del sitio.
Espero que alguna de estas propuestas te haya ayudado a solucionar el problema, y si te queda alguna duda plantéala abajo en la sección de comentarios.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
