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

Last updated by Riffaz 1 month, 1 week ago.

Assigned support staff: Riffaz.

Author Posts
September 4, 2019 at 11:40 pm #4514301

pierreE

I added a drop down menu language switcher to the menu of my website. I'm experiencing two issues:

1) Through CSS I have tried to place the drop down language switcher so that it is in line with the other menu items. I made the language switcher font size smaller than the default on purpose but now it is not centered and I have not found a way to fix this yet.

2) The icon for the drop down menu is overlapping with the name of the language. How do I fix this?

I have attached an image and outlined in red the drop down I am referring to.

Thank you!

September 5, 2019 at 2:33 am #4514693

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 below CSS in WPML >> Languages >> Additional CSS section:

.wpml-ls-item.wpml-ls-current-language {
    position: relative;
    top: -9px;
}

@media only screen and (min-width: 769px) {
#navigation .wpml-ls-item .sub-nav {
    min-width: auto;
	width: 55px !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

September 9, 2019 at 11:36 pm #4540489

pierreE

Hi Noman,

Thank you very much for your assistance! The code worked perfectly for the placement.

However I noticed that the drop down icon (ie. the small arrow pointing downwards) overlaps on top of which ever language is selected (see attached).

Is there a way to fix this so that the drop down icon is moved slightly more towards the right of the language name so there is no overlapping?

Thank you!

September 10, 2019 at 12:56 pm #4545447

Riffaz
Supporter

Languages: English (English )

Timezone: Asia/Colombo (GMT+05:30)

Hi,

Noman is off for few days and I will be helping you on this.

To fix arrow, add this css as well

@media only screen and (min-width: 769px){
#navigation .nav > li.has-children > a:after {
    right: 0 !important;
}
}

Let me know how it goes.

Regards,
Riffaz.