Skip Navigation

Home › Support › English Support › [Resolved] Adding a Pipe sign (|) separator in between languages selector

[Resolved] Adding a Pipe sign (|) separator in between languages selector

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

Problem:
The client needed guidance on adjusting the CSS for the WPML language switcher to ensure the separator pipe displays correctly across different screen sizes.
Solution:
We recommended updating the CSS to ensure the separator pipe positions correctly. Replace the existing CSS code:

.wpml-ls-item:after {
    content: "|";
    position: absolute;
    right: -3px;
    top: 0;
    color: #000;
}

with:

li.wpml-ls-item::after {
    content: "|";
    position: absolute !important;
    right: -3px !important;
    top: -5px !important;
    color: #000;
}

If this solution does not resolve your issue or seems outdated, we recommend opening a new support ticket. Additionally, please check related known issues at
https://wpml.org/known-issues/, verify the version of the permanent fix, and confirm that you have installed the latest versions of themes and plugins. For further assistance, you can also visit our support forum at
WPML Support Forum.

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

Last updated by roxienL 2 years ago.

Assisted by: Kor.

Author Posts
January 10, 2023 at 5:29 am #12781487

roxienL

Can somebody please guide me how to do it? I tried the below code but it is not showing.

/* separator pipe*/
.wpml-ls-legacy-list-horizontal {
border: medium none;
clear: both;
padding: 0;
}

.wpml-ls-item:after {
content: "|";
position: absolute;
right: -3px;
top: 0;
color: #000
}

.wpml-ls-item:first-child a {
padding-left: 0 !important;
}


 @media(max-width:992px){
.wpml-ls-item {
width: auto !important;
margin-right: 15px !important;
}

.menu-item.wpml-ls-item::after {
color:#000 !important;
top: 25px !important;
right:0 !important;
left: 30px !important;
}
}
January 10, 2023 at 5:51 am #12781507

Kor
Supporter

Languages: English (English )

Timezone: Asia/Singapore (GMT+08:00)

Hi there,

Thanks for contacting WPML support.

Try adjusting the position using CSS. You can replace this code below. 

.wpml-ls-item:after {
content: "|";
position: absolute;
right: -3px;
top: 0;
color: #000
}

With 

li.wpml-ls-item::after {
    content: "|";
    position: absolute !important;
    right: -3px !important;
    top: -5px !important;
    color: #000;
}

Let me know how it goes.

Thanks!

Kor