Reputation: 39
I am looking to style my menu with google translate. Menu works great in English. Menu is 700px wide. When it translates to Spanish it pushes it all down.. So my question: Is there a way to change the font size of text when it goes to Spanish?
I have tried this and it did not work.
.nav a {
font-size: 18px;
}
em:lang(es)) .nav a{
font-size: 14px;
}
I dont know if the code is actually seeing that because Google translate is using js.. Also this is an html site. Not wordpress or anything.
Thanks for any help
Upvotes: 0
Views: 293
Reputation: 2110
You need add lang
attribute to your html:
<nav>
<li lang="es"><a href="#">Spanish</a></li>
<li lang="en"><a href="#">English</a></li>
</nav>
and css:
nav li[lang|="es"] a{
font-size: 14px;
}
nav li[lang|="es"] en{
font-size: 16px;
}
You just need to change the lang
attribute value of li
when it goes to Spanish.
Upvotes: 1