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 thread is resolved. Here is a description of the problem and solution.

Problem:
I am trying to get the Language switcher dropdown to show, but it hides behind my navbar.

Solution:
You can fix this issue by adding the following CSS in custom CSS section of the theme OR in WPML >> Languages > Additional CSS section:

For topbar:

body .ark-header .theme-toggle-content {
    overflow: visible !important;
}

For stick menu / sticky topbar:

body .ark-header .theme-toggle-content {
   overflow: visible !important;
   z-index: 99;
   position: relative;
}

This topic contains 6 replies, has 2 voices.

Last updated by marcJ-11 4 months, 4 weeks ago.

Assigned support staff: Noman.

Author Posts
May 28, 2019 at 6:30 am #3903023

marcJ-11

I am trying to: get the dropdown to show, but i hides behind my navbar

Link to a page where the issue can be seen: hidden link

I expected to see: the dropdown on top of navbar

Instead, I got: a hidden dropdown, and a lot of issues. i've tried Z-index, position etc.

May 28, 2019 at 7:18 am #3903333

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 the following CSS in custom CSS section of the theme OR in WPML >> Languages > Additional CSS section:

body .ark-header .theme-toggle-content {
    overflow: visible !important;
}

And it will look as in the attached screenshot.

Could you please check and confirm?

Thank you

May 28, 2019 at 8:03 am #3903761

marcJ-11

It worked, but when you try to scroll down, the topbar overlaps the sticky menu.

May 28, 2019 at 9:29 am #3904679

Noman
Supporter

Languages: English (English )

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

Hi,

It seems z-index issue. Please use updated CSS:

body .ark-header .theme-toggle-content {
   overflow: visible !important;
   z-index: 99;
   position: relative;
}

And it will look as in the attached screenshot.

Thank you

May 28, 2019 at 9:45 am #3904959

marcJ-11

This kinda fixed something, but the issue is that the "Black bar" need to disappear when scrolling, so its only the "white menu" that are showing.

May 28, 2019 at 10:16 am #3905499

Noman
Supporter

Languages: English (English )

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

Hi,

Thanks for more details. Please also add below CSS:

body .header-shrink.ark-header .theme-toggle-content {
    overflow: hidden !important;
}

And let me know how it goes?

Thank you

May 28, 2019 at 10:35 am #3905719

marcJ-11

My issue is resolved now. Thank you!