Tagged: Multilingual menus, multilingual search
I recently switched to using this code to make the word “Search” next to the mangnifying glass clickable. That worked but now it doesn’t translate when the user switches to French.
#menu-item-search a:after {
content: ‘ Search’;
}
I need the “Search” text to be translated when the user switches language to French (we’re using TranslatePress).
Translation works fine with this code:
#top .avia_hidden_link_text {
display: block;
float: left;
}
Is there a way to make the text both clickable and translateable?
Thanks,
Guy
Hey guychalk,
Thank you for the inquiry.
You have to add the following css rule to adjust the search text when the French language is active.
html[lang=fr_FR] #menu-item-search a:after {
content: ‘ Recherche’;
}
Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css modification.
Best regards,
Ismael
Hi Ismael,
I’ve added the code to my child themes style.css, but it doesn’t have any effect. Below is the code that I have in that file. I did clear cache and have compression turned off.
Do you have any idea why this isn’t working.
I’ve included a link to the site.
Thanks,
Guy
#menu-item-search [data-av_icon]:before {
float: left;
margin-right: 2px;
font-size: 16px !important;
}
html[lang=fr_FR] #menu-item-search a:after {
content: ‘ Recherche’;
}
#menu-item-search a:after {
content: ' Search';
}
Hi Ismael,
I figured it out. The language code set by translate press is fr-FR for french and en-EN for English. This is what worked for me. You can close this ticket!
Thanks a lot,
Guy
/** New Search **/
#menu-item-search [data-av_icon]:before {
float: left;
margin-right: 2px;
font-size: 16px !important;
}
html[lang=en-US] #menu-item-search a:after {
content: ' Search';
}
html[lang=fr-FR] #menu-item-search a:after {
content: ' Recherche';
}
/** end new search **/