problema de css en moviles con la barra de navegación de encelado  

 
AEFCA
 AEFCA
Estimable Member

Hola
como vesi en la pantalla adjunta cuando la barra de navegación se abre, el item activo fondo azul letras no se leen y cuando se va a elegir otro item al pasar el dedo por encima este queda transparente y tampoco se lee. He mirado la demo de webempresa de encelado joomla 3.x y tiene el mismo problema. Cuando reduces la pantalla y aparece ya la barra tipo "movil" hay un problema con los colores que no se ven adecuadamente. Ver captura de pantalla adjunta

Lo he probado con tres navegadores, varios sistemas operativos, en pc y en tableta y en todos con el mismo resultado.
He intentado con firebug encontrar el código pero no he podido.
A ver si hay alguna solución.
Un saludo

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 01/04/2014 7:06 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Al parecer es un problema de los colores en la plantilla.

Ubica el archivo : /templates/encelado/less/menu.less

Para el fondo activo : línea 87 aprox.

Ubica :
color: @menuACtiveTextColor;

Cambia por :
color:#fff;

Para el hover, en este mismo archivo ubica la línea 431

Ubica :
color: @menuTextHover !important;

Cambia por :
color: #aaa !important;

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 01/04/2014 10:40 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

AEFCA
 AEFCA
Estimable Member

Gracias, acabo de realizar los cambios planteados y en la barra de "movi" se ve perfectamente, pero ahora se plantea otro problema y es que en la barra normal el item activo se ve en blanco y no se diferencia casi del fondo, es la palabra inicio está entre el logo y quiénes somos . Envío captura de pantalla.
Un saludo

ResponderCitar
Respondido : 01/04/2014 10:59 pm
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

En el mismo fichero que te indico Jhon prueba cambiando:

 color:#fff;

por

 color:#0A3C81

Saludos.

Si nuestra ayuda te ha sido útil, déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 02/04/2014 2:49 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Micky
 Micky
Estimable Member

Yo también he estado corrigiendo el problema y en el menú principal ya lo tengo solucionado. La cosas es que yo tengo un item de menú del que cuelgan 3 submenús, y en esos no veo el texto cuando están activos (adjunto capturas de pantalla)

ResponderCitar
Respondido : 02/04/2014 4:30 am
AEFCA
 AEFCA
Estimable Member

Gracias, vamos mejorando la web y solucionando estos problemillas. Ahora con esa solución la barra en grande se ve bien, la pequeña de lo móviles se lee, no muy bien pero se lee. El contraste entre ese color #0A3C81 y el fondo también azul de los item activos , el contraste es muy escaso se lee con dificultades y supongo que las personas con dificultades visuales no leerán nada. ¿Es posible cambiar a un poco mas claro este fondo por ejemplo a un #9EB3C4? Por mas que busco no encuentro en dónde cambiarlo.
Os envio captura de pantalla para ver mejor el problema de los contrastes que os hablo.

Un saludo

ResponderCitar
Respondido : 02/04/2014 10:22 am

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

Prueba a sustituir el archivo menu.less que tienes en la ruta templates/encelado/less por el que aquí te adjunto comprimido en un zip. Antes de hacerlo haz una copia de seguridad del archivo menu.less que tienes actualmente

Esto debería de arreglar los problemas con el visionado del menú en dispositivos móviles.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 02/04/2014 3:30 pm
AEFCA
 AEFCA
Estimable Member

Muchas gracias por vuestros esfuerzos, he renombrado mi menu.less a old_menu.less y he subido el menu.less que me proponeis. Y envio captura de pantalla con el problema y es que vuelve a ser "transparente" en item cuando se pasa el dedo o ratón por él.

La anterior solución era bastante buena ( mejor que la enviada en zip) solo que el contraste entre el azul del fondo con el azul de las letras no era un buen contraste y solo quiero cambiar este fondo pero no encuentro donde.
Un saludo

ResponderCitar
Respondido : 02/04/2014 4:29 pm

Cursos Gratuitos WordPress

Micky
 Micky
Estimable Member

Por mi parte, todo bien en PC, aunque en tablet y en móvil, sigue habiendo un problemita menor con el efecto over. Cuando se pasa sobre los menús el texto pasa de gris a blanco y desaparece.

Para mí este "defecto" no es demasiado importante en los dispositivos móviles, ya que al tratarse de pantallas táctiles el efecto over es poco probable que se aprecie.

En definintiva, sustituyendo el less antiguo por el que ha dejado aquí Pablo, se puede considerar que se soluciona el problema.

Muchas Gracias a todos

ResponderCitar
Respondido : 02/04/2014 4:36 pm
Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

Te adjunto una nueva versión del archivo menu.less comprimida en un zip para sustituir a la que te había pasado y en donde se corrige el problema que comentas con el efecto que ocurre al colocar el ratón sobre el enlace.

De todas formas es una cosa que no importa demasiado para dispositivos móviles, ya que con pantallas táctiles el efecto hover (colocar el puntero del ratón sobre un elemento) carece de sentido.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 02/04/2014 6:07 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

AEFCA
 AEFCA
Estimable Member

Gracias, acabo de hacer el cambio y está estupendo, va bien de colores y se ve bien, con buen contraste tanto en pc, como en la tableta y el efecto de los móviles. Lo dicho gracias por vuestro apoyo.
Un saludo
PD podemos dar por terminado este hilo, y voy a guardar ese archivo menu.less entre las carpetas de imperdibles.

ResponderCitar
Respondido : 02/04/2014 7:08 pm

Por favor Iniciar Sesión o Registro