Language switcher menu width

Hi 🙂

Please, can you give this a try: https://purothemes.com/documentation/ultra-theme/menu-locations/#heading-changing-drop-down-menu-direction and let me know if the documentation makes sense and works for you. Thanks.

Hello
The document is all well and good and takes care of the behavior of the fly-out menus
BUT
WPML langage switcher is not a regular menu and is not managed by the functions found in the usual Appearance->Menus. It is simply not there as a menu.
As I said previously, I suspect there is some kind of conflict between the way menus are managed in the theme and the way the language switcher is managed by WPML.
All I found on WPML forums are bits of css to reduce the width go the dropdown (see initial question).
None have worked.
Further reading on this problem brought this “answer” (https://wpml.org/forums/topic/dropdown-box-width-as-menu-item/):
As I said before, it seems that the width of the child item in the menu is set to a certain value (other child menu items, not from the language switcher, probably have the same width, at least the minimum width). You’ll need to specify the class that is responsible for this setting and overwrite it for the language switcher child items.
Can you help with this ?

Thanks for explaining further. I’ll get a copy of WPML and help resolve this one way or another. If you could wait until Monday that would be most appreciated.

At the moment I’m unable to replicate the issue. The switcher on both your site and my demo site seems ok. Below is what I see in my demo:

Can you perhaps screenshot the issue you’re having so I can try and recreate it on my side? Thanks.

My problem is that the dropdown language menu is much too wide for its current content.

If I could see that issue it would help me recreate it.

As you can see, my menu seems to be the same width as yours, but the text I use is shorter. So I am expecting the menu to be narrower.

Hi. Yes, that’s the standard min-width of all sub menu items in the main menu. The min width is the same whether this menu item is added from the normal menu interface or by WPML. We can try reducing it with Custom CSS. I’ll take a look when back at my computer.

You can try the following inserted into Custom CSS to set the width, manually, of the WPML drop-down:

.main-navigation .wpml-ls-item .sub-menu {
	width: 125%;
}

Brilliant! That is perfect
How do we have the menu fly out to the left now?

You can try, including the original rule we added:

.main-navigation .wpml-ls-item .sub-menu {
	width: 140%;
}
.main-navigation ul li.wpml-ls-item ul {
	left: initial;
	left: auto;
	right: 0;
	text-align: right;
}
.main-navigation ul li.wpml-ls-item ul ul {
	right: 100%;
}

We are not quite there yet.:
With the latest css, the dropdown aligns to the right of the menu text, but the submenu text moves out of the box to the right of it menu…

Furthermore the “blue box” for selected menu extends all the way.

Note that even with the first addition to the css (to control the width) the problem of the “selected menu” box was present:

For some reason your site is rendering differently to my local copy. Try, as a complete set of rules for this question:

.main-navigation .wpml-ls-item .sub-menu {
	width: 140%;
}
.main-navigation ul li.wpml-ls-item ul {
	left: initial;
	left: auto;
	right: 0;
	text-align: right;
}
.main-navigation ul li.wpml-ls-item ul ul {
	right: 100%;
}
.main-navigation ul li.wpml-ls-item ul li {
	text-align: left;
	min-width: auto;
}

All seems to behave as expected now. I only get a caution in the css that does not seem to create problems:

Many thanks

Ahh! Please, try:

.main-navigation .wpml-ls-item .sub-menu {
	width: 140%;
}
.main-navigation ul li.wpml-ls-item ul {
	left: initial;
	left: auto;
	right: 0;
	text-align: right;
}
.main-navigation ul li.wpml-ls-item ul ul {
	right: 100%;
}
.main-navigation ul li.wpml-ls-item ul li {
	min-width: initial;
	text-align: left;
}

Basically, changing auto to initial.

Caution is gone. Great support as usual.

Awesome. Thanks for being so patient. I was slow to understand this question which added to the time to resolve. All the best with this project. Chat soon. Cheers 🙂