Avisos
Vaciar todo

[Resuelto] Mostrar por encima del resto de elementos el chat facebook messenger  

Página 1 / 2
 
Gabriel
 Gabriel
Reputable Member

Buenas noches,

He instalado en la web el icono y chat de facebook messenger. Lo he hecho en un campo código de Divi en el footer global porque pretendo usarlo en todas las páginas. Funciona correctamente salvo que existen elementos en las páginas que se muestran por encima del icono y del chat. Pueden observar en la home por ejemplo, uno d elos elementos que se superponen al chat es el propio menú.

Por favor, ¿podrían indicarme cómo debo hacer para que el icono y chat de messenger no se oculta tras cualquier elemento de la página?

Gracias,

Contenido solo visible a usuarios registrados

Respondido : 13/04/2021 8:51 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Tienes que establer un z-index = 0 a los elementos que se muestran por encima, revisa:

https://elementor.com/help/how-to-use-z-index-in-elementor/

Usualmente usaras el z-index a nivel del contenedor, ya sea para fila o columna de elementor

Saludos.

Respondido : 13/04/2021 9:22 pm

Gabriel
 Gabriel
Reputable Member

@jmarreros Gracias Jhon, sí, el problema es que el código del chat de messenguer lo he copiado desde facebook en un campo código como te decía de Divi. Aunque He probado a poner en el campo código el z-index a 2000 (mayor que el definido para el resto de elementos) pero no funciona creo que tendría que ponérselo a la clase pero no sé hacerlo.

Gracias,

Respondido : 13/04/2021 9:29 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Lo que pasa es que al estar usando un constructor, es dificil decirte el elemento contenedor exacacto a aplicar el z-index, incluso podrían ser varios.

Lo mejor sería que localices los elementos que se muestran por encima y a esos aplicarles un z-index menor.

Saludos.

Respondido : 13/04/2021 9:30 pm

Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Gabriel, 

Inserta el siguiente CSS desde Apariencia -> Personalizar -> CSS Adicional:

footer > div > div > div.et_pb_row.et_pb_row_2_tb_footer.et_pb_equal_columns.et_pb_gutters1 > div.et_pb_column.et_pb_column_1_2.et_pb_column_4_tb_footer.et_pb_css_mix_blend_mode_passthrough.et-last-child{
z-index:999;
}

Saludos

Esta publicación ha sido modificada el hace 4 años por Bulmaro
Respondido : 13/04/2021 9:34 pm
Gabriel
 Gabriel
Reputable Member

@bulmaro-webempresa Muchas gracias, lo he hecho pero sigue ocultándose por otros elementos.

Respondido : 13/04/2021 9:43 pm

Gabriel
 Gabriel
Reputable Member

He visto que sólo me pasa en la home, en el resto de páginas funciona correctamente. En la home hay varios elementos en los que he tocado el z-index pero en cualquier caso es menor que 999

Respondido : 13/04/2021 9:53 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Prueba estableciendo los z-index que tocaste del home a 0

Saludos.

Respondido : 13/04/2021 10:08 pm

Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Gabriel, 

Por el diseño de la página de inicio además de las modificaciones que realizaste veo complicado corregirlo. Te sugiero revisar las secciones de la parte centro de tu página, donde se hace el efecto parallalax que es donde se complica el mostrar el ícono de messenger. Revisar otros ejemplos similares en el tema Divi tambien podría serte de utildioad -> Contenido solo visible a usuarios registrados

Respondido : 13/04/2021 10:14 pm
Gabriel
 Gabriel
Reputable Member

Muchas gracias. En la home tengo realizadas varias superposiciones de módulos así que desecharé la posibilidad de instalarlo en ella. Respecto del resto de páginas únicamente me afecta en los dos menús superiores (principal y secundario). ¿Sería posible hacer que el chat solapara a los mismos?

Gracias,

Respondido : 14/04/2021 5:39 pm

Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Gabriel,

He verificado la URL que nos compartes pero no logro localizar el chat, puedes indicarnos exactamente donde se solapa? si es posible envíanos una captura de pantalla de esta forma podemos verificar con mayor detalle

Un Saludo

Respondido : 14/04/2021 5:59 pm
Gabriel
 Gabriel
Reputable Member

@karen Es que en la home no está activado. Lo puedes ver en la página de Clases-online por ejemplo. Se solapa con los menús superiores. he estado intentando modificar al mínimo el z-index de los elementos del menú  pero no consigo que el chat lo solape. Te adjunto captura.

Muchas gracias,

image

 

Respondido : 14/04/2021 6:11 pm

Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Prueba con el siguiente código CSS para corregir el z-index del header

header.et-l.et-l--header{
  position: relative;
  z-index: 0;
}

Sin embargo para el menú de la parte inferior, veo que tiene asignado un z-index implícito de 3, ver imagen adjunta, entiendo que agregaste esto desde el maquetador, lo mejor sería que lo quites o que lo cambies a cero.

Captura de Pantalla 2021 04 14 a la(s) 12.42.31

Saludos.

Respondido : 14/04/2021 6:44 pm
Gabriel
 Gabriel
Reputable Member

@jmarreros Muchas gracias John. Ahora sale el chat encima del menú: correcto. El problema es que el menú quiero que esté fijo a través del scroll de las páginas y al poner z-index a 1 queda escondido tras los elementos de la página. ¿Habría alguna posibilidad de que lo que hiciéramos fuera subir el z-index del chat?

Perdón por la lata que os estoy dando con este asunto 🙁 

Respondido : 14/04/2021 7:27 pm

Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Al parecer el contenedor es el que causa problemas, en este caso el contenedor del footer, en lugar del código anterior usa el siguiente código:

footer.et-l.et-l--footer{
  position: relative;
  z-index: 1000;
}

Saludos.

Respondido : 14/04/2021 8:37 pm
Página 1 / 2