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

Last updated by yannisZ 3 months, 1 week ago.

Assigned support staff: Marcos Vinicios Barreto.

Author Posts
July 8, 2019 at 6:33 pm #4165043

yannisZ

Tell us what you are trying to do? Change font-size and space between languages in language switcher, in order to be different from the rest menu items

Is there any documentation that you are following?

Is there a similar example that we can see?

What is the link to your site? hidden link

July 9, 2019 at 12:23 am #4166319

Marcos Vinicios Barreto
Supporter

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

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

Hello,

Thank you for contacting WPML Support. Please, try the code below in your WordPress Dashboard > WPML > Languages > Additional CSS:

#header .nav-menu .wpml-ls-display {
font-size: 15px;
padding: 0 15px;
}

Please, note this code is just a sample, you can customize it according your needs. Please, let me know if it helps, have a nice day.

July 9, 2019 at 6:22 am #4167713

yannisZ

Hi Marcos,

Thank you for your prompt reply. The font-size works great, but the padding space still remain the same between languages and between menu items. Is it possible to have less space between languages? See attached photo.

All the best,
Yannis

July 9, 2019 at 5:24 pm #4173423

Marcos Vinicios Barreto
Supporter

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

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

Hello,

Thank you for the updates. Unfortunately your theme doesn't make this job easy as the id for the language menu items seems to be generated dinamically, currently they have something like: nav-menu-item-18-5d24cbf80f825 for every language menu item, also they don't have the default wpml classes applied and this is why it is not so easy to target them for customization as the customization needs to be done in your language menu items 'li' tags, the only way here is to target this dinamically generated ids in your custom css code.

While it is okay for us to provide this kind of simple customization, unfortunately it is out of our support scope to provide advanced customization when themes make this job hard for us, in any case I recommend you to target the items individually such as:

#header .nav-menu li#nav-menu-item-wpml-ls-2-en-5d24cbf80f858,
#header .nav-menu li#nav-menu-item-wpml-ls-2-es-5d24cbf80f88e,
#header .nav-menu li#nav-menu-item-wpml-ls-2-ca-5d24cbf80f8c1,
#header .nav-menu li#nav-menu-item-wpml-ls-2-pt-pt-5d24cbf80f8f3 {
      padding: 0 5px!important;
}

Hope it helps, have a nice day.

July 11, 2019 at 4:03 pm #4191773

yannisZ

I´m in contact with the technicians of the theme in order to solve it. Thank you.