Drupal - Language Switcher

Drupal CSS

In Drupal 8, it is very simple to create a multilingual website. In the drupal core, one can find the necessary modules to do so, such as Language, Content Translation, Interface Translation and Configuration Translation. You can just enable the modules and enable the translation that is desired from the administration menu.

To have the ability to choose the content language, there is a block to place in the region that is suitable for the website. The block is called "Language Switcher". By default, the enabled languages are displayed in list mode, as shown in the screenshot below.

Drupal default Language Switcher

However, if there is the necessity for the switcher to be displayed horizontally, it's easily changed with custom CSS,  as you can see on the screenshot below.

Drupal Language switcher horizontal

In the CSS code, the display of the list in the block has to be inline, with padding between them. For example:

#block-languageswitcher li{
        display:inline;
        padding-left:1.5rem;
}

 

Tags