This thread is resolved. Here is a description of the problem and solution.

Problem: Change language switcher design in main menu

Solution: https://wpml.org/forums/topic/change-language-switcher-design-in-main-menu/#post-4789243

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Tagged: 

This topic contains 3 replies, has 3 voices.

Last updated by juliana-de-la-macarenaG 8 months, 3 weeks ago.

Assigned support staff: Riffaz.

Author Posts
October 19, 2019 at 9:10 pm #4788325

Abdullah

Hello.

I am trying to alter the language switcher design in the main menu from image 1 to something like in the image 2.

As you can see in the second image, the language switcher has lines between its elements and all the language menu have more distance away from the regular elements in the main menu.

This is the link to my website: hidden link

Thank you.

October 20, 2019 at 7:17 am #4789243

Riffaz
Supporter

Languages: English (English )

Timezone: Asia/Colombo (GMT+05:30)

Hi,

Thank you contacting WPML support.

Add this code to WPML > Languages > Language switcher options > Additional CSS

.menuo-no-borders #Top_bar .menu > li.wpml-ls-item > a span {border-right: 1px solid #aea242 !important;}
.menuo-no-borders #Top_bar .menu > li.wpml-ls-item > a span span {border-right: unset !important;}

This will add the lines between the languages selectors but making it far from your menu is not possible using CSS.
For that, you have to edit your theme files directly and use custom switchers: https://wpml.org/documentation/getting-started-guide/language-setup/custom-language-switcher/
That is a custom work and if you do not know how to do it you can consider: https://wpml.org/contractors/

Hopefully, this helps you to get what you want and answer the possibilities. 🙂

Regards,
Riffaz.

October 20, 2019 at 10:32 pm #4790389

Abdullah

My issue is resolved now. Thank you!

May 30, 2020 at 3:37 pm #6256413

juliana-de-la-macarenaG

Hi, I want to change the text displayed on the main menu: Instead of English i want just EN Italian just IT.... How can I do that? I also want to hide a language (German) but still have some articles in German (I'll link directly the article in German) I know It seams wired, but I don't what that language to appear in the mail menu. thanks for your help!