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

Last updated by Alejandro 1 year ago.

Assigned support staff: Alejandro.

Author Posts
October 14, 2018 at 5:48 pm

albertoS-20

Hello, i see a different font used for language switch (instead of Raleway font). Moreover, i see two arrows (that indicates the submenu) instead of only one. How can i solve them please?

Regards
Alberto

October 16, 2018 at 10:21 am #2820542

Alejandro
Supporter

Languages: English (English ) Spanish (Español ) Italian (Italiano )

Timezone: Europe/Rome (GMT+02:00)

Hello,
Welcome to WPML Support.
I'll do my best to try to help you solve this issue.

I checked your CSS and it seems there's a font called "icomoon" that is handling both the dropdown arrow and it's being inherited by WPML's Language Switcher.

In this case we have to change the font-size and font-family properties in order to make the Language Switcher look like the rest of the navigation elements.

Please copy this code and paste in either:
WPML > Languages > Language switcher options > Additional CSS
or
Appearance > Customize > Additional CSS

/* Inherit Language Switcher font from website */
.wpml-ls-native {
    font-family: inherit !important;
    font-size: inherit !important; /* makes the Language Switcher the same size as the rest of the navigation elements */
}
.wpml-ls-native:before{
    content: '' !important;
    font-family: "icomoon";
}

Let me know how it goes and don't hesitate to come back if the above code didn't solve the problem, i'll gladly do my best to help you find another solution.

October 16, 2018 at 7:58 pm #2822281

albertoS-20

Hi Alejandro, thank you for your answer; i have paste the code into the custom css module into the theme options, and the font now is correct, beautiful! There is only the issue of the two arrow instead of one (see screenshot).

Regards
Alberto

October 16, 2018 at 8:14 pm #2822328

Alejandro
Supporter

Languages: English (English ) Spanish (Español ) Italian (Italiano )

Timezone: Europe/Rome (GMT+02:00)

Hello,

The problem here is when you added the code, it got pasted in a wrong format:

.wpml-ls-native:before {
    content: '
    &#039: ;
    !important: ;
    font-family: "icomoon";
}

The right form should be:

.wpml-ls-native:before {
    content: '' !important: ;
    font-family: "icomoon";
}

( the characters right after "content:" are 2 single quotes )

These kinds of errors usually happen when you paste the content instead of writing it yourself, so try to write it manually this time and you might see that extra arrow will now disappear.

Let me know how it goes.

October 16, 2018 at 8:45 pm #2822360

albertoS-20

Hi, sorry but i see correct code into css code options (see screenshot).

Regards
Alberto

October 17, 2018 at 8:24 am #2823753

Alejandro
Supporter

Languages: English (English ) Spanish (Español ) Italian (Italiano )

Timezone: Europe/Rome (GMT+02:00)

Hello,

The error is in an extra colon right after "content: ' ' !important". in line 7 of your Custom CSS section. Sorry about that, that colon slipped its way into the code in my second answer.

It's currently written like this:

content: ' ' !important : ;

instead it should look like this:

content: ' ' !important ;

Let me know how it goes and if the code works after you change it.

October 17, 2018 at 8:44 am #2823819

albertoS-20

Hi, i delete the : but i still see the double arrows.

Regards
Alberto

October 17, 2018 at 9:46 am #2824030

Alejandro
Supporter

Languages: English (English ) Spanish (Español ) Italian (Italiano )

Timezone: Europe/Rome (GMT+02:00)

Try changing the single quotes with double quotes:

It will end up looking like this:

.wpml-ls-native:before {
    content: "" !important;
    font-family: "icomoon";
}
October 17, 2018 at 1:38 pm #2824755

albertoS-20

It works, thank you!
Alberto

October 17, 2018 at 1:40 pm #2824760

albertoS-20

My issue is resolved now. Thank you!

October 17, 2018 at 2:31 pm #2824946

albertoS-20

Sorry, i have seen another bug: take a look to the smartphone view: the language element it's hard to use it. I don't know if i can ask you a solution or must ask to the theme developer.
Moreover, in desktop view there is a strange alignment of the language switch; it's a little bit lower than the other menu elements.
Thanks a lot for any answer

October 17, 2018 at 7:09 pm #2825725

Alejandro
Supporter

Languages: English (English ) Spanish (Español ) Italian (Italiano )

Timezone: Europe/Rome (GMT+02:00)

Yes,

This theme's WPML front-end features have been styled by the theme's author, but i can help you out.

update your previous code in the customizer, to this one:

/* Inherit and style Language Switcher from website */
.wpml-ls-native {
    font-family: inherit !important;
    font-size: inherit !important;
    float: left !important;
    margin-top: 0 !important;
    text-transform: uppercase;
}
.wpml-ls-native:before{
    content: "" !important;
    font-family: "icomoon";
}

Hope it helps.

October 18, 2018 at 7:34 am #2826966

albertoS-20

Hi Alejandro, thank you for your help; i attach two screenshot; now in desktop view the language switch is stick to the top of the page; into mobile view now is better, but it is half part of the main menu.
I have tried to modify the margin-top value but in mobile view it moves lower.

Regards
Alberto

October 18, 2018 at 9:32 am #2827447

Alejandro
Supporter

Languages: English (English ) Spanish (Español ) Italian (Italiano )

Timezone: Europe/Rome (GMT+02:00)

Hello,

In this case, let's make the change available only to the mobile view of the page.
First of all remove the "margin-top" and "float" property from the css class and then add the following code:

@media(max-width:1017px){
     .wpml-ls-native{
         margin-top:0 !important;
         float: left !important;
     }
}

It will now look like this :

    .wpml-ls-native {
        font-family: inherit !important;
        font-size: inherit !important;
        text-transform: uppercase;
    }

   @media(max-width:1017px){
       .wpml-ls-native{
         margin-top:0 !important;
         float: left !important;
       }
   }

That should do it, but please take this code into consideration when updating the theme because as i mentioned before, the styling is being added by the theme's author so it could change in the future.

Let me know how it goes.

October 18, 2018 at 12:27 pm #2827915

albertoS-20

Hi, thanks a lot but it doesn't resolve completely; in desktop view the vertical align still wrong and in mobile view it isn't perfect, it seems that the language switcher isn't completely part of the main menu, and it is still difficult to have the page change when you click on russian. If you click on the right arrow the submenu doesn't close but the page reload... well thank you again, if you have a solution beautiful; anyway i have contact also the theme developer.
Regards
Alberto