Language Switcher style

Hello,

since we are having bugs with headers builders Elementor suggested us on using their theme builder with their beta menu.

We were able to replicate almost everything on the menu, but we are missing the possibility to change the syle of the shortcode of translate press. We would like the button to be “part” of the menu, having the same style. Also when I hover on the button it becomes way larger and I would like it doesn’t happen.

Header is not in live version, and i don’t get how to put a screenshot here

This is the CSS I’m using:

.trp-language-switcher {
max-width: 60px !important;
max-height: 35px;
background-color: black !important;
display: flex !important;
align-items: center !important;
}

/* Assicura che tutto all'interno del language switcher abbia sfondo nero e testo bianco */
.trp-language-switcher *,
.trp-language-switcher a {
background-color: black !important;
color: white !important;
font-size: 13px !important;
text-decoration: none !important;
position: relative; /* Permette di creare la sottolineatura personalizzata */
}

/* Sottolineatura personalizzata / .trp-language-switcher a::after { content: ''; / Crea un elemento per la sottolineatura / position: absolute; left: 50%; bottom: -3px; width: 0%; height: 2px; background-color: white !important; / Sottolineatura bianca */
transition: width 0.3s ease, left 0.3s ease;
}

/* Effetto hover: il testo rimane bianco e compare la sottolineatura */
.trp-language-switcher a:hover {
color: white !important;
}

.trp-language-switcher a:hover::after {
width: 100%;
left: 0;
}

I’ve been able not to make the hovering button bigger with this CSS but it makes the hover text black making it unreadable:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

.trp-language-switcher {
max-width: 30px !important;
max-height: 35px;
background-color: black !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
overflow: hidden !important;
font-family: 'Poppins', sans-serif !important;
}

/* Forza il colore e il font su tutti gli elementi interni */
.trp-language-switcher * {
background-color: black !important;
font-family: 'Poppins', sans-serif !important;
color: white !important; /* Forza il testo bianco ovunque */
}

/* Stile dei link */
.trp-language-switcher a {
color: white !important;
font-size: 13px !important;
text-align: center;
display: block;
width: 100% !important;
padding: 5px 0 !important;
text-decoration: none !important;
position: relative;
}

/* Effetto underline personalizzato */
.trp-language-switcher a::after {
content: '';
position: absolute;
left: 50%;
bottom: -3px;
width: 0%;
height: 2px;
background-color: white !important;
transition: width 0.3s ease, left 0.3s ease;
}

/* Fissa il colore del testo in hover */
.trp-language-switcher a:hover,
.trp-language-switcher a:hover * {
color: white !important; /* Mantiene il testo bianco */
}

/* Effetto underline sull'hover / .trp-language-switcher a:hover::after { width: 100%; left: 0; background-color: white !important; / Forza il bianco */
}

• This topic was modified 1 year, 1 month ago by loreraffa93.

The page I need help with: [log in to see the link]