Skip to content Skip to sidebar

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.

Sun Mon Tue Wed Thu Fri Sat
12:00 – 20:00 12:00 – 20:00 12:00 – 20:00 12:00 – 20:00 12:00 – 20:00 - -
- - - - - - -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 4 replies, has 2 voices.

Last updated by Noman 10 months, 1 week ago.

Assisted by: Noman.

Author Posts
September 4, 2024 at 11:10 am #16139923

dmitriS-6

Background of the issue:
I am trying to move the language switcher in the phone menu up to the first place on my site hidden link.

Symptoms:
When the menu is too long to scroll down, it is difficult to switch to a required language fast enough

Questions:
How can I move the language switcher in the phone menu to the first place?

September 4, 2024 at 11:30 am #16140104

Noman
WPML Supporter since 06/2016

Languages: English (English )

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

I was not receiving a reply in chat so I moved the chat into a forum ticket for follow up. If you have created different menus for desktop and mobile then you should be able to achieve it by following the below steps:

1. Go to the WPML >> Languages page
2. Edit the Menu language switcher settings for the mobile menu.
3. Choose the “First menu item” option and press the Save button as you can see in the attached screenshot.

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

- If the above steps don’t help, please add the debug report in the Debug Information box. I have also enabled debug info box for your next reply: https://wpml.org/faq/provide-debug-information-faster-support/

Thank you

Edit language switcher settings.png
first menu item.png
September 4, 2024 at 11:47 am #16140197

dmitriS-6

Hello.
It is really very inconvenient to chat with you guys, tech support. You tend to close the chat when I really need help.

Regarding your advice, I can not follow it as it simultaneously corresponds to my both menus I created for desktop and phone. For desktop I need the switchers to be the last item and not in the drop down menu.
So where can I change the switchers separately from the desktop, relating it only to phone drop down menu?

I am attaching the settings I made for the desktop. I could not find another place for a phone menu.

Screenshot 2024-09-04 at 14.41.30.png
September 4, 2024 at 1:07 pm #16140498

dmitriS-6

please do not close the chat, i will be available in 5 hours or tomorrow from the morning

September 4, 2024 at 4:31 pm #16141968

Noman
WPML Supporter since 06/2016

Languages: English (English )

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

Thank you for your feedback, and I apologize for any inconvenience caused during our chat.

To address your query, there isn't a straightforward way to achieve separate settings for the language switcher on mobile and desktop menus. However, you can accomplish this using one of the following methods:

Method 1: Using a Custom Language Switcher and Shortcodes
1. Please enable the Custom Language Switcher from WPML >> Languages > Custom Language Switcher section and set the language switcher as dropdown for mobile.

2. Please install any plugin which provides an option to use the shortcode in menu items, add first menu item in desktop menu, and use the Custom language switcher shortcode in it:

[wpml_language_selector_widget] 

3. Then, you need to use the CSS with media queries to show and hide both language switchers in desktop and mobile view accordingly.

Method 2: Creating Separate Menus for Desktop and Mobile
1. Create a desktop menu from Appearance >> Menus page and set its location as “Primary Menu”.

2. Create a mobile menu from Appearance >> Menus page and set its location as “Secondary Menu”.

3. Enable the CSS Classes option from Screen options as you can see in the attached screenshot.

4. Add the “hide-on-mobile” class to each desktop menu item.

5. Go to the WPML >> Languages > Menu language switcher and make sure to add the language switcher for
the desktop menu.

6. Go to the WPML >> Languages > Menu language switcher and make sure to add the language switcher for the mobile menu.

7. Now, you can hide/show it using CSS as follows:

#top-header {display: none !important;}
@media(max-width: 980px) {
.hide-on-mobile,
.et_mobile_menu > li.wpml-ls-item:not(.menu-item-has-children) {
display: none !important;
}
}

You may add that CSS in WPML >> Languages > Additional CSS section.

I’ve tested Method 2 on a fresh WordPress site using the Divi theme, and it works as expected. You can check the setup and settings through this auto-login URL:
hidden link

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

Thank you for your cooperation and patience

enable css classes.png
additinoal css.png
language switcher settings backend.png
desktop view.png
mobile view.png
css classes in menu items.png

The topic ‘[Closed] Moving language switcher in the phone menu up to the first place’ is closed to new replies.