Language flags side by side

[macarri80]

Hi,

my website is in Italian and English. I would like that the flags were visible (and clickable) side by side like on attached screenshot, without the drop-down menu.

Please let me know if this is possible, thanks

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please refer this article https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/. Hope it should help to you.
Thanks
Mohammad

[macarri80]

Thanks, but the options on that page seem that not affect the layout of the language switcher on the header of the Atelier theme, the one that is active on my site.

[Mohammad – SUPPORT]

Hi,
Please paste this code at functions.php of child theme:-

function sf_language_flags($items,$args) {
    
    if (function_exists('icl_get_languages') && $args->theme_location != '') {
        $languages = icl_get_languages('skip_missing=0');
            
        if(1 < count($languages)){
           
            foreach($languages as $l){
                    $items = $items.'<li class="menu-item menu-lang-icon lang-'.$l['language_code'].'"><a href="'.$l['url'].'" class="dropdown-toggle" data-toggle="dropdown"><img src="'.$l['country_flag_url'].'" height="12" alt="'.$l['language_code'].'" width="18" /></a></li>';
            }
        }
    }
        
    return $items;
}

Thanks
Mohammad

[macarri80]

Thanks Mohammed,

I’ve pasted the code but instead of the flags appears the word “lingua” and nothing happens clicking on it.

I’ll provide ftp and admin access so that you can check. The code is commented in functions.php under the child theme folder.

[macarri80]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
I have managed to resolve the issue through given below css code:-

.header-right .aux-item{
vertical-align:middle !important;
}

ul.header-languages{
display:block !important;    
position:relative !important;
}

ul.header-languages li{
float:left !important;
}

span.language{
display:none !important;
}
.aux-languages > a{
display:none !important;
}

Thanks
Mohammad

[macarri80]

Sorry, I’ve pasted the css code but nothing happens, the flags are not visible.

The php and css code is now active on the website, so that you can check.

Thanks again

[Mohammad – SUPPORT]

Hi,
I have resolved the issue so please check after clear the cache of browser.
Thanks
Mohammad

[macarri80]

Now it’s perfect, thank you.

[Mohammad – SUPPORT]

Hi,
You most welcome and glad to help you.
Thanks
Mohammad