Hi, I have a problem with WPML language switcher with theme's menu. As you can see from the link (http://www.drivingthedream.it/00_2015/?page_id=19515), the switcher is over the menu items. I tried to set different options on WPML settings without success; i add, if I select "Show language switcher in WP menu" (Languages page in WPML backend) the problem become bigger because, in this way, there are two flags for each languages in the menu, but one is not clickable. Hope to receive your support soon. Thank you so much, best regards
Hmm. The language switcher on your site looks fine on my end (screenshot: http://cl.ly/image/1o2I0r0K3V3M ). Could you please give me the screenshot of the issue and how to reproduce it so I could check?
Hi Paul, yes for sure. I have the same problem with all browser, please find attached the screenshot taken on IE, Firefox, Chrome, Opera and Nitro, just to have a comparison; on IE the problem is bigger. Actually I'm working on laptop with 1366x768 px of resolution.
In this case, it is about the number of menu items and the viewport size. If the viewport is not large enough, it can cause the overlapping with each other like this.
You can use custom CSS with media query to adjust that. Please go to "Style Customizer > Others > Custom CSS" and try this code:
@media only screen and (max-width: 1400px) {
#side-container {
padding: 40px 50px
}
#logo-wrapper {
margin-bottom: 40px;
}
#menu-wrapper > ul > li {
font-size: 12px
}
#side-footer-wrapper {
bottom: 40px;
}
#copyright {
margin-bottom: 10px;
}
}
It will reduce the top and bottom paddings of the elements. This should help.
Thank you Paul, now it looks ok! One more thing that I have noticed in the menu: in the Copyright Text, despite I used <br> tag, in the mobile version doesn't work. I attached a screenshot.
Hi, I have a problem with WPML language switcher with theme's menu. As you can see from the link (http://www.drivingthedream.it/00_2015/?page_id=19515), the switcher is over the menu items. I tried to set different options on WPML settings without success; i add, if I select "Show language switcher in WP menu" (Languages page in WPML backend) the problem become bigger because, in this way, there are two flags for each languages in the menu, but one is not clickable. Hope to receive your support soon. Thank you so much, best regards
Hi Fabio,
Hmm. The language switcher on your site looks fine on my end (screenshot: http://cl.ly/image/1o2I0r0K3V3M ). Could you please give me the screenshot of the issue and how to reproduce it so I could check?
Regards,
Paul
Hi Paul, yes for sure. I have the same problem with all browser, please find attached the screenshot taken on IE, Firefox, Chrome, Opera and Nitro, just to have a comparison; on IE the problem is bigger. Actually I'm working on laptop with 1366x768 px of resolution.
Thanks for the screenshots.
In this case, it is about the number of menu items and the viewport size. If the viewport is not large enough, it can cause the overlapping with each other like this.
You can use custom CSS with media query to adjust that. Please go to "Style Customizer > Others > Custom CSS" and try this code:
@media only screen and (max-width: 1400px) { #side-container { padding: 40px 50px } #logo-wrapper { margin-bottom: 40px; } #menu-wrapper > ul > li { font-size: 12px } #side-footer-wrapper { bottom: 40px; } #copyright { margin-bottom: 10px; } }
It will reduce the top and bottom paddings of the elements. This should help.
P.S. Here is the related FAQ: http://uxbarn.ticksy.com/faq/2704
Thank you Paul, now it looks ok! One more thing that I have noticed in the menu: in the Copyright Text, despite I used <br> tag, in the mobile version doesn't work. I attached a screenshot.
I have set to remove the "br" tag by default in the JS code to make it not taking too much space on mobile viewport.
To change that, please open "/js/kose.js" file and find this:
if (siteWidth <= 1161) { $('#side-footer-wrapper').insertAfter('#side-container'); $('#copyright').find('br').replaceWith('<span class="blank"></span>'); } else { $('#side-container').append($('#side-footer-wrapper')); $('#copyright').find('span.blank').replaceWith('<br/>'); }
Remove or comment out the code so as a result:
if (siteWidth <= 1161) { $('#side-footer-wrapper').insertAfter('#side-container'); } else { $('#side-container').append($('#side-footer-wrapper')); }
Now any "br" tags will not be removed.
It works! Thank you so much!! :)