Slider Revolution y sus problemas con los menús

Actualmente estamos inmersos en el diseño del nuevo sitio web de Ruralka On Road, el cual esperamos que esté en marcha a finales del mes que viene, y en el que nos hemos encontrado con un importante problema con el conocidísimo plugin para WordPress Slider Revolution.

La verdad es que la resolución del mismo nos ha hecho perder no poco tiempo y estamos seguros de que a más de uno le ha surgido el mismo problema pero, y esto es lo más curioso, no hemos encontrado ningún tipo de solución publicada en ningún centro de soporte o foro especializado.

Descripción de los problemas

El proyecto de Ruralka On Road se está realizando sobre la no menos conocida plantilla para WordPress Avada y en el mismo necesitamos añadir en la página de inicio un slide a pantalla completa, lo que a priori no implica ningún tipo de complicación, pero el diseño elegido por el diseñador gráfico utiliza un menú lateral izquierdo vertical, en lugar del típico menú superior horizontal. Esta simple elección nos ha generado dos problemas interesantes:

El primero de los problemas generados es que en los dispositivos a partir de los 1.100 píxeles de ancho se muestra el menú lateral izquierdo vertical, pero con el contenido del slide centrado al ancho total de la pantalla, pero no de la parte visible del contenido.

El segundo de los problemas generados es que en los dispositivos con menos de 1.100 píxeles de ancho se muestra un menú superior horizontal en lugar del menú lateral izquierdo vertical, lo que provoca que el slide exceda el alto visible de la pantalla.

Soluciones

Primer problema

Lo primero que hicimos fue solucionar el primer problema, que se resuelve con una pequeña porción de código CSS directamente en el propio slide, concretamente en la opción Custom CSS, a la que le añadimos el siguiente código CSS:

Básicamente lo que indica es que si la pantalla tiene como mínimo 1.100 píxeles que mueva la capa que contiene el slide, a la que llamamos #ror_fullscreen, la mitad del ancho del menú lateral izquierdo vertical, en nuestro caso concreto 152,50 píxeles, la mitad de 305 píxeles que es lo mide el ancho total.

Con este pequeño código CSS conseguimos centrar el contenido del slide en el ancho de la parte visible del contenido.

Segundo problema

La solución más simple al segundo problema es añadir en la opción Increase/Decrease Fullscreen Height (Optional) el nombre de la capa que contiene el menú, que en el caso concreto de Avada, y del diseño de header elegido, es #side-header, pero esto nos genera un problema adicional y es que en dispositivos a partir de los 1.100 píxeles de ancho nos hace desaparecer por completo el slide ya que adquiere un alto de 0 píxeles.

Descartada esta solución nos tuvimos que remangar un poco y tirar de código JavaScript bajo jQuery para dar con una solución definitiva, concretamente este es el código JavaScript que empleamos en la sección Custom JavaScript:

Lo primero que hacemos es capturar el evento resize de la pantalla y una vez capturado comprobamos si el ancho de la misma es inferior a los 1.100 píxeles en cuyo caso añadimos 120 píxeles a la opción fullScreenOffset del slide. Esos 120 píxeles es justamente el ancho del menú superior horizontal que se muestra en estos dispositivos. En caso de que la pantalla tenga como mínimo 1.100 píxeles entonces le quitamos esos 120 píxeles a la opción fullScreenOffset del slide.

Dado que estamos totalmente seguros de que este mismo problema se os va a plantear en más de una ocasión en proyectos futuros, no hemos dudado en compartirlo con todos vosotros para que no perdáis el mismo tiempo que hemos tenido que perder nosotros para encontrar una solución definitiva.

Esperamos vuestros comentarios y sugerencias sobre estas soluciones propuestas.