This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

This topic contains 9 replies, has 2 voices.

Last updated by Bobby 1 year, 5 months ago.

Assigned support staff: Bobby.

Author Posts
May 9, 2018 at 2:06 am #2042403

Theodoros

Tell us what you are trying to do?

I was hoping to use a dropdown as a language switcher. My theme(Bridge) supports left and top menu depending on the width/orientation of the device. When choosing the dropdown it only shows in the left menu but it disappears from the top menu. Besides that it does not seem to blend well with my theme. It looks small and it is not transparent either. I tried the list option too but this does not look elegant. The more languages you have the more menu items will be created which makes the menu look cluttered.

Is there any documentation that you are following?

Language switcher documentation here did not provide any insights

Is there a similar example that we can see?

This is an example of how I would like the language switcher to show:

hidden link

What is the link to your site?

hidden link

May 9, 2018 at 7:01 pm #2060050

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

Hello,

The site you are using as a reference has the drop down language switcher placed in a top horizontal menu.

the drop down switcher will be displayed best in such menu layout.

It is important to note that the theme's CSS is going to control the language switcher layout in the front end.

If possible i would like to see how the language switcher is displayed as a drop down on your side menu , as it will most likely require custom CSS to be displayed in the way you desire.

May 9, 2018 at 7:28 pm #2060509

Theodoros

Hi Bobby. Thanks for the reply. I have added the dropdown. Please let me know if you need the wp credentials too. Thank you!

May 9, 2018 at 9:06 pm #2061567

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

Hello,

Thank you for adding the drop down switcher.

It looks like its working as it should. Drop down , drops and language is clickable.

The styling also does look like it takes over your theme's menu styling CSS as it should.

the biggest problem i can see here is the dropdown language's text color which is most likely easily changed by going to your theme options and picking the color for your submenus, im thinking most likely its set to that grey color.

May 10, 2018 at 1:24 am #2064551

Theodoros

Hey Bobby,

Thank you for your answer!

The dropdown I used, to illustrate my point to you, was not the one I intended to use. The one I wanted to use was the widget language switcher with position set to Left Menu Area. While on the subject I noticed there is not a Top Menu Area so how do I get to use this one on a site that supports both a left menu and a top one?

If you visit my site now you will notice that the current dropdown does not blend well with the theme as is.

So my question is - if we can make it blend with some css magic - which setup do you reckon is more appropriate for my site? This one or the previous one?

If you find the first dropdown more appropriate I would like to ask if we can make it looks like so

LANGUAGES +

ENGLISH
GREEK

Instead of:

ENGLISH +

GREEK

which I find a bit confusing.

Kind regards!

May 10, 2018 at 3:15 am #2064845

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

The widget menu will almost always look the way it does now regardless of the theme CSS and is not the best choice in my opinion if you are looking for something to blend well. Of course you could implement some CSS and remove the background and such but i think the actually menu language switcher did look best and is more appropriate for that location.

Keep in mind you can also add the menu language switcher in custom locations by using PHP

-> https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#custom-locations

i am not familiar with your theme but i believe your theme author might be able to provide you with the best area of your theme's code to place the custom language switcher.

May 10, 2018 at 10:49 am #2069811

Theodoros

Hi Bobby,

I have reverted to the previous dropdown then. I managed to fix the child menu item so that it looks like its parent too. The question that remains though is how can I make it so that it looks like this:

LANGUAGES +

ENGLISH
GREEK

Instead of:

ENGLISH +

GREEK

Thanks

May 10, 2018 at 5:47 pm #2077873

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

Hello,

Unfortunately this is where adding the language switcher as a widget is useful because it allows for the addition of a "title"

when it comes to the menu language switcher this is not possible unless you use a custom language switcher.

Therefore you can either use the widget and use CSS to make it look better or create a custom menu language switcher to add the "title" option. [Keep in mind that this is not always going to work with all themes]

both of these options unfortunately do require custom work which is currently not supported by our forum support

For such work we we recommend contacting one of our certified partners .
->https://wpml.org/documentation/support/wpml-contractors/

=>https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#custom-locations

you can try the following quick CSS solution to bring the "+" dropdown sign closer to the language name so its not so spaced out.

children>a>.plus, nav.vertical_menu_on_click ul>li.menu-item-has-children>a>.plus, nav.vertical_menu_float ul>li.menu-item-has-children>a>.plus {
    margin-top: 25.5px;
    margin-right: 100px;
}

Note: margin-right: 100px; controls it.

May 10, 2018 at 7:08 pm #2078812

Theodoros

Hi Bobby,

I think for the time being i’ll settle for the current dropdown. If only you could help me out a little bit with the css. I tried the css you posted here but unfortunately it doesn’t seem to work.

Can you help?

Once again thank you very much for your time and effort!

Kind regards,

May 10, 2018 at 8:08 pm #2079087

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

That is my fault , i missed a part when i copied it and past it over here

please try now

nav.vertical_menu_toggle ul>li.menu-item-has-children>a>.plus, nav.vertical_menu_on_click ul>li.menu-item-has-children>a>.plus, nav.vertical_menu_float ul>li.menu-item-has-children>a>.plus {
    margin-top: 25.5px;
    margin-right: 100px;
}

The topic ‘[Closed] Display language switcher in Left/Top menu’ is closed to new replies.