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 7 replies, has 2 voices.

Last updated by aliciaO 3 weeks, 3 days ago.

Assigned support staff: Bruno.

Author Posts
September 16, 2019 at 5:44 pm #4582997

aliciaO

Hi,

How can I decrease the space between language name or flags. I'm using Divi theme with Liberty child theme and I've tried several CSS codes on my own without any results.

Can you give me a hand on this?

And also is it possible to add a separator between both languages like a "|"?

Thanks

September 17, 2019 at 1:26 am #4584641

Bruno
Supporter

Languages: English (English ) Portuguese (Brazil) (Português )

Timezone: America/Sao_Paulo (GMT-03:00)

Thank you for contacting us. Please, follow the steps below:

- Click on the WPML > Languages > Language switcher options
- Click on the Additional CSS
- Insert these lines:

li.wpml-ls-first-item::before {
    content: " | ";
    color: white;
    position: relative;
    left: 28px;
    top: 13px;
}

I will attach an image of how this should look on your site. Please, let me know if I can help with any other questions you may have about it. I'll be happy to help.

Thank you.

September 17, 2019 at 8:32 am #4586423

aliciaO

Thank you, it worked. However as the main header on hover and on scroll has white background, the "|" is invisible in these situation. Is it possible to edit the on hover/scroll color?

Thanks

September 17, 2019 at 9:45 pm #4591153

Bruno
Supporter

Languages: English (English ) Portuguese (Brazil) (Português )

Timezone: America/Sao_Paulo (GMT-03:00)

Please follow the same steps above, and add this CSS also below the previous CSS:

.et-fixed-header li.wpml-ls-first-item::before {
    color: #777d96;
}

This is the full CSS:

li.wpml-ls-first-item::before {
    content: " | ";
    color: white;
    position: relative;
    left: 28px;
    top: 13px;
}

.et-fixed-header li.wpml-ls-first-item::before {
    color: #777d96;
}

Please, let me know if I can help with any other questions you may have about it. I'll be happy to help.

Thank you.

September 18, 2019 at 8:01 am #4593505

aliciaO

Thank you. On scroll it is OK, but on hover the "|" keeps white and it becomes invisible.

Thanks

September 18, 2019 at 4:46 pm #4599207

aliciaO

Hi, I was able to find out how to change the color of the "|" on hover. But I still need your assistance.

If you check the image attached, you'll see that the language selector on mobile is not displaying properly.

Can you please check the image attached to see what I'm refering to.

Thanks

September 19, 2019 at 12:44 am #4600399

Bruno
Supporter

Languages: English (English ) Portuguese (Brazil) (Português )

Timezone: America/Sao_Paulo (GMT-03:00)

Please, also enter this CSS to see if this will fix the problem on mobile devices:

.option_mobile_menu li.wpml-ls-first-item::before {
    content: "" !important;
}

Thank you.

September 19, 2019 at 8:37 am #4602605

aliciaO

My issue is resolved now. Thank you!