Wpml language selector dropdown disappear under the menu WordPress
- SOLVED
Hi, I'm trying to set fully visible the dropdown of wpml selector, actually it gets cropped since it arrives at the menu. You can check it on http://new.congsds.org
Any suggest to fix it?
Answers (4)
Jayaram Y answers:
leonem,
Its possible. Please add / change the css as below.
.header_bottom{
overflow:inherit;
}
.header_top{
background: inherit;
overflow: inherit;
border-top: 3px solid #888;
}
#lang_sel ul ul{
z-index: 22;
}
Attached is the result of how it looks. Let me know if you face any issues using this css. Will be happy to help.
leonem comments:
It works fine! Thanks!
Just one more question I'm trying to activate wpml redirect on default language but doesn't change visiting home page.
Jayaram Y comments:
I think there is some misconfiguration with the settings. please check this link [[LINK href="https://wpml.org/forums/topic/wrong-redirections-to-default-language-and-to-homepage-of-current-language/"]]here[[/LINK]]
Rempty answers:
Delete overflow: hidden; from .header_bottom and .header_top.
And add this css
#lang_sel ul ul{
z-index:9;
}
.mainmenu{
position: relative;
z-index: 1;
}
leonem comments:
Looks working, but as @dimadin says the dropdown arrives over the menu dropdown so it doesn't works anymore the menu's dropdown. I've tryed with chrome's developer tools and i had to set z-index also into revolution slider
leonem comments:
Looks working, but as @dimadin says the dropdown arrives over the menu dropdown so it doesn't works anymore the menu's dropdown. I've tryed with chrome's developer tools and i had to set z-index also into revolution slider
Rempty comments:
OK try this, now will use #color_header
Delete overflow: hidden; from .header_bottom and .header_top.
#lang_sel ul ul{
z-index:99;
}
#color_header{
position: relative;
z-index: 1;
}
dimadin answers:
This will be hard or impossible to fix because of your main menu (Home, Who we are..) that also attaches events on hover.
To see this, edit your stylesheet main.css and find two rules: .header_bottom and .header_top. For both elements replace overflow: hidden; with overflow: visible;
You will see that height of this menu is larger but still when you hover "French" dropdown will disappear (it is over "Where we are").
To see that your main menu is problem, edit rule for header and add margin-bottom: 50px;
You will see your whole dropdown menu and all items are clickable and are not over your main menu.
I suggest that you move language dropdown. For example, you can move it more to the top, edit your rule for header .widget so that instead of padding: 60px 0 0px; you have padding: 50px 0 0px; and also .widget_icl_lang_sel_widget .widget-title { margin-bottom: 0; } and you dropdown menu will be working but then you have search field that is not aligned...
Note that both dropdown and search field are anyway not good on mobile.
