King
King

Reputation: 39

Google translate CSS Style Spanish

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

Answers (1)

Danis
Danis

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;
}

here is some example.

You just need to change the lang attribute value of li when it goes to Spanish.

Upvotes: 1

Related Questions