Solicito su valiosa asesoría técnica para corregir tres problemas de comportamiento estructural en la cabecera de mi sitio web https://aecave.es. El portal fue estructurado inicialmente a través de vuestro asistente de Inteligencia Artificial de Webempresa, utilizando la versión moderna de WordPress (FSE / Edición Completa del Sitio).
Como pueden observar en las capturas adjuntas, el menú superior (con fondo azul corporativo #0D47A1) experimenta graves deformaciones visuales e incompatibilidades entre navegadores (Safari, Firefox, Chrome y dispositivos iOS/iPhone):
Pérdida de Ancho Completo en Scroll: Al realizar un desplazamiento vertical (scroll) hacia abajo, un comando o script interno de la plantilla encoge el contenedor del menú azul hacia el centro de la pantalla. Esto rompe la estética y deja al descubierto franjas grises y azules vacías en los laterales derecho e izquierdo, un error crítico muy evidente en Google Chrome (especialmente en modo incógnito) y en pantallas de móviles.
Fijación de la Cabecera (Sticky Header): Deseo que el encabezado principal se mantenga 100% fijo, estático e inamovible anclado a la parte superior del navegador (top: 0), de modo que el resto de las secciones se deslicen limpiamente por debajo de él. Actualmente el Hero se desplaza y desaparece por completo hacia arriba.
Franjas Parásitas: Al navegar, se aprecia una franja blanca horizontal de medio centímetro en el borde superior del menú (visto al estar logueado en la administración de WordPress) y una franja azul descolgada por debajo de la foto del Hero de la página de inicio.
Dado que actualmente cuento con reglas CSS personalizadas en mi sección de CSS adicional que han logrado estabilizar con éxito el fondo blanco de las páginas internas, requiero que me indiquen cuál es el procedimiento correcto o el fragmento de código preciso para anular el script de encogimiento de la plantilla y forzar a que la cabecera mantenga siempre un ancho del 100% real de forma fija y permanente en todos los navegadores sin desconfigurar la visualización en dispositivos móviles.
Adjunto las capturas con los recuadros de evidencia.
Ya he procedido a retirar la contraseña de visibilidad del sitio. La web https://aecave.es ya se encuentra completamente pública, abierta y disponible para que puedan inspeccionar el código de la cabecera.
No te preocupes, ahora sí es posible que podamos inspeccionar la web como cualquier visitante, voy por partes segun tus comentarios.
Pérdida de Ancho Completo en Scroll
El comportamiento que mencionas, si bien no lo puedo notar en los navegadores que he realizado las pruebas, para hacer que el header sea ancho completo y retirar el padding superior puedes aplicar los siguientes estilos CSS
Muchas gracias por iniciar la revisión de la web y por tus sugerencias.
Debo comenzar aclarándote que no tengo ninguna experticia en codificación o creación de páginas web. Acepté la petición de unos colegas economistas que están formando una asociación en España para crear la página contando con la IA de Webempresa.
Sin embargo, el prompt inicial no fue tomado en cuenta adecuadamente por la IA y desde sus inicios la página tenía inconsistencias evidentes. Ello me condujo a recurrir a la IA de Google para resolverlas.
Con ese apoyo he podido resolver algunas que están reflejadas en los códigos CSS adicionales y la petición de ayuda en el foro con los detalles allí expuestos fue preparada por la IA de Google. Compartiré con ella tus recomendaciones.
Con respecto a la fijación de la cabecera, dime, por favor, dónde puedo ver si esta opción está disponible desde la configuración del tema activo.
Ayer volví a revisar nuestra web en mi iPhone 13 Mini y la franja blanca aún está allí, tanto en Safari como en Chrome. De igual manera, cuando utilice mi iMac con Firefox y Chrome. Adjunto las capturas de pantalla. ¿Me podrías decir, por favor, cuáles serían las causas de que aún yo las vea y tú no? Y cuáles serían las soluciones.
Muchas gracias por el contexto, para ser un proyecto iniciado sin experticia y que se ha ido puliendo también con apoyo de la IA ha salido muy bien puedo acotar
Lo sugerido de estilos personalizados puedes añadirlo directamente desde las opciones de Apariencia -> Personalizar - CSS añadido
Agradezco tu reconocimiento a que la página esté bastante bien, a pesar de mi falta de experticia, lo cual me anima a continuar dedicando el tiempo que sea necesario. La IA es una herramienta muy buena, pero requiere ser muy cuidadoso con sus recomendaciones, pues en más ocasiones de las que anticipaba no son acertadas.
Ya compartí con la IA de Google todas tus recomendaciones, incluyendo las capturas de pantalla.
Por cierto, las verificaciones de los cambios las estoy haciendo en Safari, donde configuré para tener la sección “Develop” disponible, que me permite aplicar “Empty Caches” y asegurarme de que efectivamente estoy viendo la web con los cambios más recientes luego de refrescar la página.
En la captura de pantalla trato de resaltar el problema con la cabecera, que entiendo también se conoce como “hero”, observado en todas las secciones menos la de Inicio. Allí se puede ver cómo el hero se reduce y la sección Contacto ya está al borde de la página.
Este es el nuevo mensaje que me recomienda enviarte.
Muchas gracias por el código de ancho completo y por la orientación. He aplicado tu regla CSS avanzada combinándola con mis estilos para corregir las cabeceras.
Tengo dos detalles críticos que requiero que evalúes en el código interno de la plantilla, ya que persisten desajustes importantes:
Doble franja azul en Scroll (Secciones internas): Al navegar hacia abajo en páginas como "Quiénes somos", la cabecera sigue encogiéndose en su ancho y deja al descubierto una segunda franja azul por detrás de la base, estropeando el diseño. Tu regla body:has mitiga parte del comportamiento, pero el script nativo de la plantilla sigue reduciendo el contenedor principal. ¿Qué clase exacta debo atacar para congelar el ancho del bloque flotante al 100% real sin que se encoja?
Aclaración sobre la interfaz: He notado en tus capturas de pantalla de referencia que me estás mostrando la ruta del panel de WordPress antiguo y tradicional (Apariencia -> Personalizar). Te aclaro que mi instalación utiliza la versión moderna de WordPress con Edición Completa del Sitio (FSE), por lo que gestiono los estilos desde el menú Apariencia -> Editor -> Estilos globales -> CSS adicional. Te lo comento por si hay alguna incompatibilidad en la forma en que el tema FSE interpreta las jerarquías de las clases que me propones.
Adjunto las evidencias visuales de cómo se ve el menú superpuesto y el encogimiento actual.
Gracias por comentarnos sobr ela información del CSS, actualmente añadir el codigo en esa sección es correcto y no represneta nnguna incompatibilidad de su aplicación. He estado verificando el comportamiento de la cabecera en tu sitio web y logre locarlizar de donde viene ese encogimiento que se produce al hacer scroll.
En este caso el cambio del tamaño no lo esta provocando slo el ancho configurando en el bloque, la plantilla esta aplicando una animación CSS vinculada directamente al desplazamiento de la pagina que vuelve a modificar el contendero mientras haces scroll, es por ello que aun cuando establezcas inicialmente un ancho completo del 100% a tu cabecera esta termina reduciendose nuevamente deja visible esa seguna franja azul.
Para solucionarlo prueba añadir el siguiente codigo CSS al final de todo el codgo que tienes ahora añadido:
Guarda los cambios y vacia cualquier cache que tengas añadida en el sitio web, revisa luego si con ello al navegar en todas las paginas de tu sitio web incluidas las internas la cabecera se muestra de forma correcta la hacer scroll.
Ya hice los cambios que me sugeriste, que no dieron resultado, y los compartí con la IA de Google, que es quien me está ayudando a resolver los problemas que tengo.
Aquí tienes el nuevo mensaje que me sugirió te enviase.
Muchas gracias por tu análisis técnico detallado sobre el plugin Extendify y la animación de scroll. He procedido a añadir tu código CSS al final de mi archivo tal como me indicaste, pero lamentablemente el problema persiste exactamente igual.
Adjunto dos capturas de pantalla como evidencia:
Una captura de mi panel de CSS adicional para que verifiques que el código está perfectamente pegado al final del archivo.
Una captura de la sección Quiénes Somos en navegación real (tras realizar un vaciado completo de caché en Safari mediante "Empty Caches" y refescamiento de la pagina), donde se aprecia que, al hacer scroll, el contenedor azul de la cabecera sigue reduciéndose en su ancho y no cubre los laterales de la pantalla, dejando ver el otro fondo azul.
Dado que la regla de desactivación de la animación (animation: none !important;) está siendo ignorada por el contenedor flotante .ext-header-sticky.ext-header-glass, ¿es posible que necesitemos forzar de forma paralela las propiedades de ancho (width: 100vw !important; left: 0 !important; right: 0 !important;) directamente sobre esa misma ruta o ID de Extendify?
Quedo muy atento a tus instrucciones para solucionarlo.
Encantados de poder ayudar, nos comentas si con esto podemos dar como cerrado este tema en particular. Recuerda que puedes crear un nuevo tema sin problema si tienes algún otro inconveniente, es por tener el foro organizado y si te surge alguna otra duda, pues lo vemos ya en un nuevo tema. Quedamos atentos a tu respuesta.
