[Closed] styling Language Switcher

Hi,

Thank you for contacting WPML Support. To display floating language switcher on your site, please make sure to follow the below steps:

1. Add the below code in functions.php file of your active theme:

add_action('wp_footer', 'wpml_floating_language_switcher'); 
  
 function wpml_floating_language_switcher() { 
    echo '<div class="wpml-floating-language-switcher">';
        
        do_action('wpml_add_language_selector');
    echo '</div>'; 
}

2. Add the below CSS in the custom CSS section of the theme:

.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
  
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
  
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
  
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: #f8f8f8; 
  border: 1px solid; 
  border-color: #eee; 
  padding: 0px; 
  border-radius: 6px; 
  
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}

3. Go to WPML >> Languages > Custom Language Switcher section, check the Enable checkbox, press the Customize button, choose the similar options as you can see in the attached screenshot, and press the Save button.

And it should display as you can see in the attached screenshot.

If the issue still persists, 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/

Kindly let me know the results,
Thank you

Thank you for the update. The switcher added with the code I shared is the same floating one we show in our documentation. You can adjust its position using CSS, for example, try changing bottom: 10px; to something like top: 150px; to better fit your layout as you can see in the attached screenshot. Here you can see a demo link: hidden link

If you have a specific design in mind, feel free to share a screenshot or example link, and I’ll be happy to guide you further.

Thank you for your cooperation