Please make sure to update to WPML 4.3.4 before reporting any issue

Hi, Amit here, I am the WPML Support Manager, our current ticket queue is high, update your WPML plugins and make sure you meet the minimal requirements for running WPML before reporting an issue please - many tickets are resolved doing that

Please look at our updated list of Known Issues and you can also use our support search to find helpful information and of course review our documentation before opening a ticket.

If you do need to open a ticket please make sure to provide us with all the needed information as described in this page

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.

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

Tagged: 

This topic contains 2 replies, has 2 voices.

Last updated by mohamad-muhanadA 1 month ago.

Assigned support staff: Riffaz.

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

mohamad-muhanadA

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

mohamad-muhanadA

My issue is resolved now. Thank you!