In this guide we’ll go through some quick steps detailing how to add a WPML language selector to your mobile menu toggle bar using the language switcher shortcode which is built into WPML.
Step 1: Add an “HTML” Toggle Block to the mobile toggle bar
Go to Mega Menu > Menu Themes > Mobile Menu. Use the Toggle Bar Designer to add an “HTML” block to the toggle bar (see Mobile Toggle Blocks), and paste in the following shortcode:
|
1 |
[wpml_language_switcher type=“custom” flags=1 native=1 translated=0] |
Save the theme. The shortcode attributes can be adjusted to suit your requirements: flags shows the language flags, native shows the language name in its own language and translated shows the language name in the current language. See the WPML documentation for all available options.
Step 2: Style the language selector
To style the language selector so that it fits in with the toggle bar, add the following to Mega Menu > Menu Themes > Custom Styling:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
#{$wrap} .mega-menu-toggle .wpml-ls { display: flex; align-items: center; height: 100%; padding: 0; border: 0; background: transparent; width: auto; ul { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; } li { margin: 0; padding: 0; } a { display: flex; align-items: center; gap: 6px; padding: 0; color: #fff; /* Adjust to suit your toggle bar background color */ font-size: 14px; line-height: 1; } } |
Final Result
You should now see a language selector inside your mobile toggle bar:
See also: Creating multilingual mega menus with WPML.