Skip Navigation

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

Last updated by assafD 1 year, 6 months ago.

Assigned support staff: Noman.

Author Posts
February 22, 2019 at 5:02 pm

assafD

I am trying to: align the language switcher in the top menu of the website hidden link

Link to a page where the issue can be seen:hidden link
I am with Avada theme.
It is work fine for the English (default) version, but it does not work for any other language - I try to French and Italian and Spanish. I already did export the data from English and import it after switching the languages and it does not fixed.

I expected to see: Language and the arrow to be aligned on each language

Instead, I got: arrow jumping above with 50 px or so.

February 24, 2019 at 8:36 am #3236356

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 following CSS in your theme’s or child theme style.css file OR Custom CSS section of the theme:

.wpml-ls-item span.menu-text {
    display: inline-block !important;
}

.wpml-ls-item .menu-text img {
    position: relative;
    top: 20px;
}

And it will look as in attached screenshot.

Please let me know if this resolves your issue or you need further assistance.

Thank you

February 25, 2019 at 8:20 am #3238268

assafD

Hello. Unfortunately this does not fix my issue.
See the attached image - this happens on bigger screens - >1366 px (mine is 4K, but it happens on 1920px as well).
And after this css on small screens the arrow disappear completely.
Thanks

February 25, 2019 at 2:52 pm #3240445

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Thanks for more details. I have replaced below CSS:

.wpml-ls-item span.menu-text {
    display: inline-block !important;
}

.wpml-ls-item .menu-text img {
    position: relative;
    top: 20px;
}

.sub-menu{
	margin-top: 41px !important;
}

#menu-item-wpml-ls-8-en > a, #menu-item-wpml-ls-8-es > a{
    height: 102px !important;
    line-height: 102px !important;
}

With:

.wpml-ls-current-language > a {
	height: 102px !important;
	line-height: 102px !important;
}

.fusion-main-menu .sub-menu {
    top:100%;
}

And now it looks as in attached screenshot.

Please let me know if this resolves your issue or you need further assistance.

Thank you

February 25, 2019 at 8:25 pm #3241883

assafD

Sorry, but this fixed only part of the problem.
So now it looks ok in general but when you scroll down and the header goes to the top of the page the language drops down.
Samo for the arrow in screens smaller than 1366px. Also there is not dropdown on this menu (<1366px) when I click on the arrow it just reload the language but does not show me rest of the languages.

February 26, 2019 at 1:14 pm #3244999

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

- I have replaced this CSS:

.fusion-is-sticky .fusion-main-menu > ul > li >a{
	line-height: 65px !important;
}

with:

.fusion-is-sticky .fusion-main-menu > ul > li,
.fusion-is-sticky .fusion-main-menu > ul > li >a{
	line-height: 65px !important;
	height:auto !important;
}

And now it looks as in attached screenshots.

- For mobile menu, you have selected ‘flayout’ design, this style only allows parent level menu items that’s why dropdown not showing. You can switch any other style in order to use dropdown.

Thank you

February 27, 2019 at 7:01 pm #3252278

assafD

My issue is resolved now. Thank you!