How to properly display language switcher in the footer of Twenty Seventeen theme

If you add a footer language switcher to a site using the Twenty Seventeen theme, it is not visible on the front-end. It is actually rendered, however, the default styling settings make it not visible.

Let’s take a look at two simple solutions to make the footer language visible in the Twenty Seventeen theme. Feel free to choose whichever looks better to you.

Both of the solutions are done on the WPML → Languages page.

Solution 1

The first solution involves clearing all colors for the language switcher and adding a short CSS code to properly position the footer and add a shadow to its elements, for better visibility.

Step 1

Edit the Footer language switcher options and select the Clear all colors options for the Color themes option.

Setting the option to clear the language switcher colors

Step 2

Add the following CSS to the Additional CSS section of the Language switcher options.

.wpml-ls-statics-footer {
  position: relative;
  text-shadow: 0 0 .3em rgba(0,0,0,.5);
}

Adding simple CSS rules for better visibility of the language switcher

Front-end result

Footer language switcher on the front-end after applying the first solution

Solution 2

The second solution only involves adding a short CSS rule to code to Language switcher options. It makes the background of the footer language switcher white, positions the switcher relatively and adds some bottom padding.

Add the following CSS to the Additional CSS section of the Language switcher options.

.wpml-ls-statics-footer {
    position: relative;
    background: #fff;
    margin-bottom: 0; //reset language switcher margin
    padding-bottom: 30px; // add some white space at the bottom
}