Topic: WPML Language Switcher Position in Header on Tablet/Mobile

YEAR93
October 31, 2025 at 11:30 am

I created a GeneratePress element called WPML Language Switcher with a shortcode for a custom WPML language switcher. I want to display it in the header on tablet and mobile.

I used the before_navigation hook, but it still shows after the hamburger menu icon. I want it to appear before the hamburger icon, as shown in screenshot 2. In screenshot 1 you can see the current state.

Can you help me position it correctly?
Ying
October 31, 2025 at 12:24 pm

Hi there,

Try using menu_bar_items hook instead.
YEAR93
November 4, 2025 at 4:00 am

I changed the hook to the one you suggested (menu_bar_items). However, after updating it, the element is no longer visible on the front end.

When I checked the source code, I noticed that the .menu-bar-items <div> has display: none. If I manually change it to display: block, the WPML language switcher appears in the correct position but then both the menu label and the hamburger icon are displayed twice.

How can this be fixed? View attached screen recording for reference.
Ying
November 4, 2025 at 9:45 am
The menu_bar_items hook should not be set to display:none by default, based on what I see, it’s been set to display:flex:
https://app.screencast.com/9Yp4VgOFpeWON

However, the language switcher has been set to display none as it has ul tag.

So you will need this css:
```
.inside-header .menu-bar-items .wpml-ls ul {
    display: block;
}
```
YEAR93
November 5, 2025 at 3:42 am

This fixed everything.

Looks exactly how I wanted now. Thank you!
Ying
November 5, 2025 at 10:33 am

You are welcome 🙂

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

WPML Language Switcher Position in Header on Tablet/Mobile