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

Last updated by ka-lun-karenC 3 months, 1 week ago.

Assigned support staff: Noman.

Author Posts
July 6, 2019 at 10:03 am

ka-lun-karenC

I am trying to: add a line between different languages in the language switcher menu, and make the space between the languages closer.

Link to a page where the issue can be seen: hidden link

I expected to see: EN | 繁 in the menu bar

Instead, I got: I do see that but "| 繁" looks one px lower than "EN".

July 7, 2019 at 10:23 am #4157549

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Thank you for contacting WPML Support. You can fix this issue by adding the following CSS in custom CSS section of the theme OR in WPML >> Languages > Additional CSS section:

.wpml-ls-item + .wpml-ls-item a > span {
    margin-top: -1px;
}

And it will look as in the attached screenshot.

Thank you

July 7, 2019 at 8:52 pm #4158211

ka-lun-karenC

Hi Noman, thank you very much for your assistance. I would like to ask how could I change the px between the "N" of "EN" and "|" and "|" and "繁" please?
I would like "EN" and "繁" to be closer to the "|".

Thanks a lot and your help is much appreciated.

Cheers,
Karen

July 8, 2019 at 6:45 am #4159337

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

You can achieve it by using below CSS:

.eltd-position-right > .eltd-position-right-inner > nav > ul .wpml-ls-item > a span {
    padding-left: 4px !important;
    padding-right: 2px !important
}

And it will look as in the attached screenshot.

Please let me know if this resolves your issue or you need further assistance with this issue.

Thank you

July 8, 2019 at 1:03 pm #4162681

ka-lun-karenC

Thank you Noman, it worked! 🙂
I would like to ask in the mobile view, this divider "|" is being shown in front of "繁" (please see attached) and is there a way to get rid of it in this particular view please?

July 8, 2019 at 2:47 pm #4163679

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

You can hide it by using below CSS:

@media(max-width:992px){
	body .wpml-ls-item + .wpml-ls-item a > span {
		border: none !important;
	}
}

Thank you

July 8, 2019 at 2:59 pm #4163757

ka-lun-karenC

My issue is resolved now. Thank you!