[Resuelto] Consulta visualización banderas GTranslate

Hola Benigno

Se puede hacer pero tenemos que realizar algunos cambios.

.- Accede Apariencia -> Menus

.- En la parte superior despliega Opciones de pantalla y selecciona Classes CSS 

.- Añade un elemento de menu " Enlaces personalizados "

.- En la opción URL añade #

.- En etiqueta de navegación añade lo siguiente:

<div class="rembando-banderas">[gtranslate flags=1 layout=horizontal]</div>

.- En clases CSS añade lo siguiente:

rembando-banderas

.- Guarda el menu

.- Accede a Divi -> Opciones del tema

.- En el bloque CSS Personalizado añade lo siguiente:

/* === BANDERAS EN HORIZONTAL  === */

.rembando-banderas .gtranslate_wrapper a[data-gt-lang="es"] { order: 1; }
.rembando-banderas .gtranslate_wrapper a[data-gt-lang="en"] { order: 2; }

/* Resaltar idioma actual */
.rembando-banderas .gtranslate_wrapper a.gt-current-lang {
transform: scale(1.15) !important;
box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0,0,0,0.5) !important;
z-index: 20;
}
/* Contenedor principal */
.rembando-banderas {
display: inline-block !important;
vertical-align: middle;
margin-left: 20px;
line-height: 1;
}

/* El contenedor de banderas */
.rembando-banderas .gtranslate_wrapper {
display: flex !important;
align-items: center;
gap: 20px;
flex-wrap: nowrap !important;
white-space: nowrap;
}

/* Cada enlace de bandera */
.rembando-banderas .gtranslate_wrapper a.glink {
display: inline-block !important;
width: 28px !important;
height: 21px !important;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
transition: all 0.2s ease;
flex-shrink: 0;
}

/* Imagen de la bandera */
.rembando-banderas .gtranslate_wrapper a.glink img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
display: block;
}

/* Hover */
.rembando-banderas .gtranslate_wrapper a.glink:hover {
transform: scale(1.25);
box-shadow: 0 3px 10px rgba(0,0,0,0.4);
z-index: 10;
}

/* OCULTAR TODO EL DROPDOWN (por si acaso) */
.rembando-banderas #google_translate_element2,
.rembando-banderas .skiptranslate,
.rembando-banderas .goog-te-gadget {
display: none !important;
}

/* Responsive */
@media (max-width: 980px) {
.rembando-banderas {
display: block !important;
text-align: center;
margin: 15px 0 !important;
padding: 10px 0;
border-top: 1px solid #444;
}
.rembando-banderas .gtranslate_wrapper {
justify-content: center;
gap: 15px;
}
}

@media (max-width: 480px) {
.rembando-banderas .gtranslate_wrapper {
flex-wrap: wrap !important;
gap: 12px;
}
.rembando-banderas .gtranslate_wrapper a.glink {
width: 32px !important;
height: 24px !important;
}
}
/* Ocultar el dropdown duplicado (lo tienes bien) */
li.menu-item.menu-item-gtranslate.menu-item-has-children.notranslate {
display: none !important;
}

Guarda los cambios y lo revisas.

Un saludo

Muchas gracias por tu ayuda Pepe, funciona perfecto.

Solo un detalle en la vesión móvil los iconos de las banderas se ven muy pequeñitos, ¿como podemos cambiarle el tamaño?? 

Muchas Gracias!

Hola Benigno.

Del código que te pase busca lo siguiente:

.rembando-banderas .gtranslate_wrapper a.glink {
width: 32px !important;
height: 24px !important;
}

Modifica los valores por lo siguiente:

width: 52px !important;
height: 44px !important;

Un saludo

Gracias por tu ayuda Pepe, solución perfecta como siempre.

Muchas gracias por tu ayuda y por el gran soporte que nos brindas siempre 🙂

Hola Benigno

Nada, gracias a ti y sobretodo gracias por tu valoración 😀 , es muy importante para nosotros.

Cualquier cosa que necesites ya sabes que nos puedes encontrar por aquí 😉 

Un saludo