Our Woocommerce store is now multilingual thanks to the weglot plugin. In the desktop view, we have integrated the country selector next to the shopping cart. For mobile view, we placed the HTML Widget in the header with some surrounding code:
<div class="only-mobile">
<center>
<small>
<div id="weglot_here"></div>
</small>
</center>
</div>
.only-mobile has specific code to only display in mobile mode and not in desktop mode:
@media (min-width: 768px) {
.only-mobile{
display: none !important;
}
Question 1 The ul element for the second language appears slightly lower than the first one. I tried adjusting margins, vertical alignment, and display properties directly in the code, but nothing worked due to the numerous classes. Any suggestions?
Question 2 We want to remove the blue underline hover effect on the second element. I attempted to address this with the following CSS:
.a:hover {
text-decoration: none;
color: black;
}
I applied this to .country-selector and .only-mobile with and without :hover, but the changes did not take effect. Any ideas?