Adding Polylang language switcher icon

Hi @itweb99,
The language switcher is a feature of Polylang plugin, you can read the instructions on its documentation page
Please let me know if I can help you further.

I want to put the language switcher icon in the header after search icon, where can i add it? Which file?
Also the logo disappear on mobile and tablet, how to fix it?
On desktop it show the logo but on phone it only shows search icon and three line (menu mobile compact view).

If you use compact menu even on desktop, you can add this function in your functions.php file:

function brand_compact_navigation() {
	$brand_settings = wp_parse_args(
		get_option( 'brand_settings', array() ),
		brand_get_defaults()
	);
	$search_icon = 'enabled' === $brand_settings['nav_search'] ? '<a href="#" class="search-form-icon"><i class="fa fa-fw fa-search menu-search-form-icon"></i></a>' : '';
	?>
	<div class="compact-menu-icons">
		<?php echo $search_icon; // WPCS: XSS ok. ?>
		<ul style="list-style-type:none;margin:0 10px;padding:0;"><?php pll_the_languages( array( 'show_flags' => 1, 'show_names' => 0, 'hide_current' => 1 ) );?></ul>
		<a id="mobile-menu-button" class="c-hamburger c-hamburger--htx">
			<span>toggle menu</span>
		</a>
	</div>
	<?php
}

Adjust pll_the_languages function as you need, you can find more in the documentation.

I suggest to use a child theme, or you’ll lost your changes on next theme update.

To show the logo on mobile devices you have to choose an image in Site Identity > Mobile logo.

ok ,so the language switcher icon is showing on mobile view(compact menu) but not on desktop.
I inserted the above code from in function.php file after 1st line –
<? php
function brand_compact_navigation() {…………………………………..
So i want the language icon to show on desktop as well.

And the menu is close to the logo(logo on left) i want the menu to be on the right or center how ?

Thanks

As I said in the previous reply, this solution works if you set to yes Layout > Navigation > Use compact menu on desktop.
You should see something like this:

The code should be in the functions.php of a child theme, but you can place it at the bottom of the file. Remember that in this way you will lost your changes on next theme update.
The menu should be on the right, can you provide a url or a screenshot to take a look?

• This reply was modified 7 years, 4 months ago by maxsdesign.

I want the menu/navigation to be on the right, now its more towards the logo, on the left.link below
https://drive.google.com/file/d/0B35RsB97MvGLeFFrZFViLVVXRGc/view?usp=sharing
I want to have the menu like this
Please follow this link to view the image
https://drive.google.com/file/d/0B35RsB97MvGLMkcwMldmZnVNWDQ/view?usp=sharing

• This reply was modified 7 years, 4 months ago by itweb99.
• This reply was modified 7 years, 4 months ago by itweb99.

I saw the image. How did you insert the flag? Maybe it needs only a little style adjustment, but I need to see the code that you used.

I inserted the below code in function.php, as you told me to add there.

function brand_compact_navigation() {
	$brand_settings = wp_parse_args(
		get_option( 'brand_settings', array() ),
		brand_get_defaults()
	);
	$search_icon = 'enabled' === $brand_settings['nav_search'] ? '<a href="#" class="search-form-icon"><i class="fa fa-fw fa-search menu-search-form-icon"></i></a>' : '';
	?>
	<div class="compact-menu-icons">
		<?php echo $search_icon; // WPCS: XSS ok. ?>
		<ul style="list-style-type:none;margin:0 10px;padding:0;"><?php pll_the_languages( array( 'show_flags' => 1, 'show_names' => 0, 'hide_current' => 1 ) );?></ul>
		<a id="mobile-menu-button" class="c-hamburger c-hamburger--htx">
			<span>toggle menu</span>
		</a>
	</div>
	<?php
}

But the menu is now moved towards the logo.
Thank you so much for all your help.

• This reply was modified 7 years, 4 months ago by itweb99.

hi max,
I’m having trouble adding the language switch icon on desktop view I even set no to “use compact view on desktop”, though its showing on mobile view. I created a child them and i added this code to function.php of child them:

function brand_compact_navigation() {
	$brand_settings = wp_parse_args(
		get_option( 'brand_settings', array() ),
		brand_get_defaults()
	);
	$search_icon = 'enabled' === $brand_settings['nav_search'] ? '<a href="#" class="search-form-icon"><i class="fa fa-fw fa-search menu-search-form-icon"></i></a>' : '';
	?>
	<div class="compact-menu-icons">
		<?php echo $search_icon; // WPCS: XSS ok. ?>
		<ul style="list-style-type:none;margin:0 10px;padding:0;"><?php pll_the_languages( array( 'show_flags' => 1, 'show_names' => 0, 'hide_current' => 1 ) );?></ul>
		<a id="mobile-menu-button" class="c-hamburger c-hamburger--htx">
			<span>toggle menu</span>
		</a>
	</div>
	<?php
}

Please see the screesnhot
1.) Compact view on desktop is set to no
2.) function.php of child theme
3.)Mobile/compact view

Hi itweb99,
you see the icon only on small devices because that function adds the icon only in the compact menu. You need to add the icon in the menu as well (docs here), add a class to that menu item and hide the icon on small devices like so:

@media (max-width: 1024px) {
    .your-switcher-icon-item-class {
        display:none;
    }
} 

how to add the icon in menu via widget, but there’s no menu widget.

i want the icon to show on mobile as well as on desktop

Yes, as I said, to see the icon even on desktop you have to add it to the menu.
In the Polylang docs you can read:

You can include the Polylang language switcher in your menu. If you don’t see the language switcher metabox, check that it is not disabled in the screen options.

i dont see it
screenshot

could you please write down each steps to add the language switch icon in child theme .