Comportamiento extraño menú en dispositivos  

Observo que solo se ve bien en ordenador, y usando Firefox. Si navegas con Safari ocurre lo mismo que en el iPad y el Iphone. La barra queda como colgada encima del slide de banners y se queda a la mitad de pantalla en los scrolls.

Adjunto capturas (de Safari y dispositivos móviles). En Firefox se ve bien. Voy a tener que quitarlo hasta que lo solucionemos, porque queda muy raro .

BUenos días,

Ayer cerramos un hilo (este concretamente) https://www.webempresa.com/foro/32-Joomla-30/159967-Personalizaci%C3%B3n-de-cabecera-joomla-30.html#310807 porque todo parecía ir bien. Era relativo a dejar el menú fijo y cambiarlo de color.

Con la última apreciación de Jhon, todo quedó perfecto. Posteriormente hice la comprobación en un iPad y un Iphone. El comportamiento del menú no es el mismo que en el ordenador.

La barra menú inicia al cargar como 2 cm separada del borde superior, tapando parte del slide (esto no ocurre ahora en el ordenador, tras el añadido que hicimos con Jhon), y ademas no se queda arriba con el scroll, se queda en la mitad de la pantalla.

Lo dejó así durante un rato para que puedas verlo con el error (en tablets o teléfonos). En un par de horas tendré que retroceder, pues la página no se ve bien en tablets.

¿Alguna idea o sugerencia para solucionarlo?
Muchas gracias

URL del sitio: Contenido solo visible a usuarios registrados

Hola David.

Elimina el código que te paso jhon:

#rt-drawer{
    margin-bottom:80px;
}

Vuelve a dejar fija la cabecera y lo revisamos haber que puede estar pasando.

Un saludo

He dejado el primer código solamente (el que tú me pasaste Pep). Arranca arriba en Safari, pero pisa los banners) Razón por la que ayer puse de nuevo un post, y Jhon sugirió añadir ese margen. Si quito el margen, vuelve a pisar los banners.

Lo dejo con el error para que lo veas (aunque preferiria que no estuviera así durante mucho tiempo, porque los bannes son de pago y es un día laborable).

Gracias.

Hola David.

prueba si con esto se soluciona:

#rt-main .rt-container {
  margin-top: 5em!important;
}

Un saludo

Hola Pepe,

En Firefox si. En Safari (y dispositivos móviles apple, safari) no.

Tras poner ese añadido, he borrado historial, cookies y recargado, y este es el resultado.

Adjunto captura de Safari vs.. Firefox.

Hola David.

Ok, si ya veo, pero es complicado solucionar eso ya que solo es con un navegador.

para el tema de la versión móvil. supongo que es por que aparecen los elementos del menú en dos lineas, esto lo podrías solucionar con lo siguiente:

@media (max-width: 980px) {
#rt-main #rt-content-top{
margin-top: 5em!important;;
}
}

Un saludo

Hola Pepe,

Acabo de hacer la prueba. No se soluciona. Las pruebas en dispositivos móviles son de apple (iPad y iPhone) y como usan el mismo navegador (Safari) aparece mal en todos.

Entiendo que es de dificil solución porque cada navegador lo interpreta de una manera. No osbtante no puedo dejarlo de tal modo que porque todos los usuarios de mac lo verían mal. Por tanto , dejaré la versión cambiando el color (como me enseñaste) pero no podré dejarlo en fijo.

Sobre el mismo menú ¿como puedo reducir un poco la fuente del texto de los menús? (si prefieres que lo abra en otro hilo, lo abro).

Muchas gracias por tu tiempo, que le vamos a hacer...

Hola David.

¿como puedo reducir un poco la fuente del texto de los menús?

añade lo siguiente:

.gf-menu a {
  font-size: 15px!important;
}

Un saludo

Pues listo.

Muchas gracias