[Resolved] Language switcher menu width

This topic contains 15 replies, has 2 voices, and was last updated by  Andrew Misplon 1 year, 2 months ago.

Tagged: 

  • Author
    Posts
  • #7200

    jfcyr
    Participant

    Hello
    I am using WPML to manage my site translations. I am currently using a language switcher in my main menu rightmost position. (http://reflexphotonics.com).
    My problem is that the dropdown language menu is much too wide for its current content. I have found some css in the WPML forums that is supposed to eliminate this issue.
    li.wpml-ls-menu-item ul li a {
    width: auto;
    }

    Unfortunately it doesn’t not work. I suspect that there is conflict with the theme. Can you help ?
    As a side questions, how can you make the last menu to the right fly out to the left (towards the center of the page).
    Thanks

    #7212

    Andrew Misplon
    Keymaster

    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.

    #7229

    jfcyr
    Participant

    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 ?

    #7235

    Andrew Misplon
    Keymaster

    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.

    #7237

    Andrew Misplon
    Keymaster

    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.

    #7238

    jfcyr
    Participant

    WPML
    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.

    #7239

    Andrew Misplon
    Keymaster

    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.

    #7240

    Andrew Misplon
    Keymaster

    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%;
    }
    #7241

    jfcyr
    Participant

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

    #7243

    Andrew Misplon
    Keymaster

    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%;
    }
    #7245

    jfcyr
    Participant

    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…
    WPML3
    Furthermore the “blue box” for selected menu extends all the way.
    WPML2
    Note that even with the first addition to the css (to control the width) the problem of the “selected menu” box was present:
    WPML4

    #7246

    Andrew Misplon
    Keymaster

    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;
    }
    #7247

    jfcyr
    Participant

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

    Many thanks

    #7248

    Andrew Misplon
    Keymaster

    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.

    #7249

    jfcyr
    Participant

    Caution is gone. Great support as usual.

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

Scroll to top