[Đã đóng] Selettori di lingua

Buongiorno,

ho un sito web in due lingue con Tema Salient 18.0.2 vorrei visualizzare le bandiere di entrambe le lingue ma fare in modo che l'utente capisca quale è quella corrente magari facendo sembrare che il tasto sia premuto. ho già inserito php e css per la visualizzazione nell'header : function my_custom_language_switcher() {
echo '<div class="custom-language-switcher">';
do_action('wpml_add_language_selector');
echo '</div>';
}
add_action('wp_footer', 'my_custom_language_switcher');

e css
.custom-language-switcher {
position: fixed;
top: 20px; /* Regola questo valore per spostarlo più in alto o in basso */
right: 20px; /* Regola questo valore per spostarlo più a destra o a sinistra */
z-index: 9999; /* Assicura che sia sopra gli altri elementi */
background-color: #fff;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

Per il mobile :

@media (max-width: 768px) { /* Applica questi stili solo su schermi più piccoli */
.custom-language-switcher {
position: fixed; /* Rende il selettore flottante rispetto alla finestra del browser */
top: 10px; /* L'altezza va bene, lo manteniamo a 10px dal bordo superiore */
right: 70px; /* Manteniamo la posizione a 70px dal bordo destro */
z-index: 9999; /* Assicura che sia visualizzato sopra altri elementi */
padding: 0; /* Rimuovi il padding dal contenitore principale */
}

.custom-language-switcher ul.wpml-ls-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-end; /* Assicura che gli elementi siano allineati a destra all'interno del flex container */
list-style: none;
margin: 0;
padding: 0;
}

.custom-language-switcher ul.wpml-ls-container li {
margin: 5px 0px; /* Ridotto ulteriormente il margine orizzontale per avvicinare le bandiere */
}

.custom-language-switcher .wpml-ls-item-toggle,
.custom-language-switcher .wpml-ls-item {
font-size: 14px; /* Dimensione del testo */
padding: 6px 8px; /* Padding interno dei tasti */
line-height: 1.2; /* Altezza della riga */
display: inline-flex; /* Assicura che bandiera e testo siano allineati */
align-items: center;
border-radius: 4px; /* Bordi arrotondati */
border: none; /* Rimuovi il bordo */
background-color: transparent; /* Rimuovi il colore di sfondo */
color: #333;
text-decoration: none;
}

.custom-language-switcher .wpml-ls-flag {
max-width: 26px; /* Aumentata leggermente la dimensione delle bandiere (da 20px a 24px) */
height: auto;
margin-right: 3px; /* Spazio tra bandiera e testo */
}
}