WordPress - Design - How to delete an extra button?

In this article, you'll learn how to delete extra language switchers on your WordPress website. 

When several buttons are displayed after adding the Weglot Switcher to your website's native menus, you may need to remove the unnecessary switchers. To do so, you can add a CSS rule to hide them.

1. Find the switcher's parent selector 

First, you can find an HTML parent element that contains the Weglot button you want to hide. You'll need to find a specific container so only the desired language selector is hidden. 

To find it, you can use the Inspector tool in your browser (right-click > 'Inspect Element'). 

For instance, let's say we want to hide the button on the top right area of this website: 

In the inspector view (at the bottom of the screenshot), main-navigation is the ID name of the element that contains the language switcher we want to remove.

Indeed, it includes the Weglot button we want to delete (as the blue area shows on the top at the top of the screenshot) but not the other switchers.

No matter the selector's name, if it's an ' ID', you must prefix the name with a pound sign (# ), and if it's a 'class', you must add a period (. ) before.

Here, the CSS selector of the parent element would be #main-navigation .

2. Add the CSS rule to hide the parent element

Once you've found the right selector, go to your WordPress Dashboard > Weglot plugin settings > Override CSS and paste the following code: 

[INSERT THE_PARENT_SELECTOR HERE] .wg-li {
    display: none !important;
}

Here is an example of what it should look like (according to the previous example):

3. Click on the 'Save changes' button, and you are done!

The related extra button is no longer displayed.