[Resolved] Adding a separator in the language switcher

Hi, Mario.

Before your ticket is assigned to one of my colleagues, please allow me to walk you through some initial debugging steps. This will help speed up the support process.

Please see our guides on adding a custom Language Switcher at the following links to see if they help you achieve what you need.

https://wpml.org/documentation/getting-started-guide/language-setup/custom-language-switcher/

https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/how-to-fix-styling-and-css-issues-for-the-language-switchers/

I have also found the following simple CSS directive that you can tweak to your needs and add in WPML -> Language Switcher Options -> Additional CSS.

https://stackoverflow.com/questions/9171699/add-a-pipe-separator-after-items-in-an-unordered-list-unless-that-item-is-the-la/16131865

Regards,
Itamar.

Hi there.

To change it's color, you can use the "color:" attribute like this (check the latest line):

.menu-item.wpml-ls-item.menu-item-wpml-ls-2-es::after {
    content: "|";
    position: absolute !important;
    right: 0 !important;
    top: 0px !important;
    color: red !important;
}

To leave more spacing in front of the bar or after, you can use the "margin" property, but only after you also set the "left" property, because for the moment you have only the "right" property set and having the "left" one is also needed if you are using an absolute-positioned element like this where you want the margin to be taken into consideration.

So your new code that also contains color and the alignment for the languages separator will look something like this:

.menu-item.wpml-ls-item.menu-item-wpml-ls-2-es::after {
    content: "|";
    position: absolute;
    right: 0 !important;
    top: -1px !important;
    color: red !important; /* here we have the color */
    left: 0 !important; /* here we have the left property */
    margin-left: 19px !important; /* here we have the margin - you can use also margin-right, or both, if you want to have space in front and after */
}

Hope that makes sense.

Kind regards,
Mihai Apetrei

Hi there.

For mobile, you should be able to use this other one instead:

#et_mobile_nav_menu .menu-item.wpml-ls-item.menu-item-wpml-ls-2-es::after {
    content: "|";
    position: absolute;
    color: red !important;
    left: 20px !important;
    margin-left: 35px !important;
    bottom: 27px;
}

For having both languages on the same line, I am not able to help because I can see only one language (ES) - I don't see the other one because you set it as hidden (attaching screenshot of what I see).

Hi there.

Please add the following parts of code under teh code you have already:

#et_mobile_nav_menu li#menu-item-wpml-ls-2-es, #et_mobile_nav_menu li#menu-item-wpml-ls-2-en {
    width: 50px !important;
    float: left !important;
}

#et_mobile_nav_menu li.wpml-ls-item a {
    padding-left: 28.078px !important;
}

That should do the trick.

Have an amazing rest of the day

Mihai